Почему отслеживание minmax (auto, 1fr) отличается от auto, если содержание длиннее 1fr? - PullRequest
Новая
       6

Почему отслеживание minmax (auto, 1fr) отличается от auto, если содержание длиннее 1fr?

1 голос
/ 29 марта 2020

У меня проблема с CSS Grid в моем приложении при использовании функции minmax, и этот кодовый блок демонстрирует это:

https://codepen.io/dragonflypl/pen/eYNxmrB

In общее: AFAIR minmax игнорирует максимальное значение, если минимальное значение больше максимального. Так что для: 

grid-template-columns: auto minmax(auto, 1fr) 1fr 1fr;

, если содержание во втором столбце действительно велико, то для увеличения столбца потребуется auto. Тем не менее, это не работает так.

Но ... В примере, который имеет: 

grid-template-columns: auto auto 1fr 1fr;

, он работает как ожидалось. Оба столбца auto растут и, похоже, в равной степени разделяют их пространство.

Таким образом, похоже, что функция minmax задерживает вычисление размера дорожки.

Есть ли какие-либо технические объяснение этому? 

.grid-one {
  display: grid;
  grid-template-columns: auto minmax(auto, 1fr) 1fr 1fr;
}

.grid-two {
  display: grid;
  grid-template-columns: auto auto 1fr 1fr;
}

.grid-one>div,
.grid-two>div {
  border: 1px solid black;
}
<div class="grid-one">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident velit minus reprehenderit rem rerum, impedit consequuntur fuga inventore est hic nisi placeat non unde sapiente quia blanditiis! Repudiandae, provident incidunt!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ratione ducimus ipsa impedit in iste cum? Odio possimus porro placeat! Quo similique exercitationem eligendi, numquam fuga voluptas doloribus amet aliquam!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tenetur iste, quibusdam numquam sunt quod libero consequuntur nesciunt, laboriosam aperiam, fugit accusantium veritatis sequi? Aspernatur delectus dolorum minus laborum repellendus.</div>
  <div>a</div>
</div>

<div class="grid-two">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident velit minus reprehenderit rem rerum, impedit consequuntur fuga inventore est hic nisi placeat non unde sapiente quia blanditiis! Repudiandae, provident incidunt!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum ratione ducimus ipsa impedit in iste cum? Odio possimus porro placeat! Quo similique exercitationem eligendi, numquam fuga voluptas doloribus amet aliquam!</div>
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis tenetur iste, quibusdam numquam sunt quod libero consequuntur nesciunt, laboriosam aperiam, fugit accusantium veritatis sequi? Aspernatur delectus dolorum minus laborum repellendus.</div>
  <div>a</div>
</div>
...