Детский элемент переполняет контейнер, несмотря на высоту: 100% ⇐ Html

[Anonymous]

У меня есть этот код: < /p>

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

#container {
display: grid;
height: 150px;
background-color: green;
grid-template-columns: 1fr 1fr;
}

#child {
margin: 20px;
height: calc(100% - 40px);
/* This gets ignored? */
background-color: red;

display: flex;
flex-direction: column;
}

#grandchild {
overflow: auto;
flex: 1;
}< /code>


some non-scrollable title

hello

hello

hello

hello

hello

hello

hello

hello

hello

< /code>
< /div>
< /div>
< /p>
, который я ожидаю получить этот результат: < /p>
 < /p>
Однако вместо этого он переполнен в зависимости от количества пространства, которое содержимое в рамках Div Grandcild занимает: < /p>

Так, по сути, высота: Calc (100% - 40px); 

line Для детского контейнера просто ничего не делает? Почему это свойство игнорируется? Но если есть двое детей и только 1 столбец, то у второго ребенка снова будет такая же проблема + он переполняет контейнер, поэтому я не думаю, что это решение можно считать правильным. < /P>



Подробнее здесь: https://stackoverflow.com/questions/794 ... height-100