Запретить дочернему элементу гибкого столбца увеличивать родительскую высоту, но при этом дочерний элемент заполняет дин ⇐ CSS

[Anonymous]

Пытаюсь создать очень адаптивную веб-страницу с разделом #details рядом с разделом #comments. Для экранов разных размеров раздел #details будет автоматически увеличиваться или уменьшаться в соответствии с размером .details. Я бы хотел, чтобы раздел #comments соответствовал высоте раздела #details. Однако внутри моего раздела #comments мне нужен #commentsWrapper с возможностью прокрутки, содержащий все отдельные .comments. Это мой желаемый результат:
[img]https://i.sstatic .net/OlnQ6x81.png[/img]

Несмотря на все мои усилия, я не могу заставить #commentsWrapper НЕ увеличивать высоту # раздел комментариев следующим образом:

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

*, ::before, ::after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}

body {
width: 100vw;
height: 100vh;
}

main {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 16px;
padding: 32px;
}

#details {
flex: 1 1 60%;
display: flex;
flex-wrap: wrap;
gap: 8px;
background-color: lightgrey;
}

.detail {
flex: 1 1 40%;
display: block;
height: 50px;
min-width: 360px;
background-color: orange;
}

#comments {
flex: 1 1 30%;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
background-color: lightcoral;
min-height: 480px;
padding: 8px;
}

#commentsWrapper {
width: 100%;
height: 100%;
max-height: 100%;
background-color: lightblue;
overflow-y: auto;
}

.comment {
display: block;
height: 200px;
width: 100%;
background-color: red;
margin: 8px 0;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13



A
B
C
D
E
F

Подробнее здесь: https://stackoverflow.com/questions/791 ... fill-paren