Почему третья сетка не расширяется, чтобы соответствовать его переполненному содержанию при использовании `minmax (100px ⇐ Html

[Anonymous]

Я использую CSS Grid, чтобы выложить контейнер с фиксированной высотой с 8 рядами. Каждая строка определяется с использованием: < /p>

Код: Выделить всё

grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));

Контейнер имеет фиксированную высоту 600px , и внутри него есть 8.box элементы. Один из этих элементов (третий) содержит очень большой блок текста < /strong>, который явно переполняет ее сетку.

Код: Выделить всё

.container {
height: 600px;
width: 500px;
display: grid;
grid-auto-flow: row;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
}

.box {
color: white;
font-size: 1.5rem;
text-align: center;
}

body {
background-color: bisque;
}< /code>
  

FIRST
SECOND

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus sed
tempore saepe in voluptatem asperiores velit animi iure mollitia itaque
atque distinctio blanditiis accusamus officiis, dolor iusto quis. Nemo,
optio! Nemo quos provident, odit hic maiores obcaecati ut debitis
placeat, sapiente tenetur perspiciatis praesentium in! Vero quos
inventore illum perferendis odio quo eligendi consequatur beatae, libero
repellat eaque esse. Error. Vero deleniti repellendus enim itaque
sapiente dolor, esse eos dolorum nisi laudantium incidunt eligendi
asperiores delectus laboriosam obcaecati ut. Atque natus non alias quae
nesciunt magnam veniam ad culpa necessitatibus. Ea tenetur assumenda
aspernatur rem consectetur quo pariatur amet quibusdam? Perferendis
nobis ea odio laborum atque vel consectetur. Illo odit inventore quis
eum quaerat! Optio totam velit autem nulla et. Possimus facilis quos
voluptates hic. Accusamus reprehenderit nihil aliquid? Nisi ducimus
minima eveniet quos rerum dicta, illo obcaecati excepturi nesciunt,
voluptatibus non modi facere saepe minus necessitatibus, cum autem
blanditiis?

FOURTH
FIFTH
SIXTH
SEVENTH
EIGHTH

Вопрос:
Я ожидал, что третий ряд вертически соответствует его переподшивому содержанию. Но вместо этого он остается фиксированным на уровне 100px и переполняет визуально.>

Подробнее здесь: https://stackoverflow.com/questions/796 ... when-using