css - Почему minmax(0, 1fr) работает для длинных элементов, а 1fr-нет?
css3 css-grid (1)
Итак, у меня есть эта сетка:
+---------+------------------------------+---------+
| <div> | <p> - 1000 characters long | <div> |
+---------+------------------------------+---------+
Внутри
p
есть супер длинная строка без пробелов.
div
s - это заполнители с фиксированными размерами.
Это производит выше:
display: grid;
grid-auto-flow: column;
grid-template-columns: auto minmax(0, 1fr) auto;
Но изменение
minmax(0, 1fr)
на
1fr
дает это:
+---------+----------------------------------------+
| <div> | <p> - 1000 characters long | <div> |
+---------+----------------------------------------+
Он выходит за пределы родительского элемента и выходит за пределы размера экрана. Почему он не ведет себя как minmax?
Потому что
1fr
по
minmax(auto, 1fr)
эквивалентно
minmax(auto, 1fr)
.
Когда вы используете
minmax(0, 1fr)
, это нечто иное, чем автономный
1fr
.
В первом случае дорожка не может быть меньше размера элемента сетки (
минимальный
размер -
auto
).
Во втором случае дорожка может свободно изменять размер до 0 по ширине / высоте.
Больше деталей:
-
Пересмотреть значение
1fr
- Предотвратить расширение области сетки, заставляя прокручивать всю страницу