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?

Codepen


Потому что 1fr по minmax(auto, 1fr) эквивалентно minmax(auto, 1fr) .

Когда вы используете minmax(0, 1fr) , это нечто иное, чем автономный 1fr .

В первом случае дорожка не может быть меньше размера элемента сетки ( минимальный размер - auto ).

Во втором случае дорожка может свободно изменять размер до 0 по ширине / высоте.

Больше деталей:





css-grid