Flex переполняет своего родителя, когда максимальная высота установлена ​​на 100% ⇐ CSS

[Anonymous]

У меня проблема с CSS, которую я не мог решить уже несколько часов. У меня есть HTML со следующими элементами:
[*]
.modal — представляет модальное окно страницы, его высота ограничена 30vh.
[*]
.wrapper — представляет контейнер, который оборачивает модальное содержимое, его содержимое является входным (в моем приложении это входные данные для поиска) и списком элементов
[*]
.list — список элементов шириной более 30vh

Желаемое поведение заключается в том, что оболочка заполняется входными данными, а остальная часть оболочки заполняется списком. Если количество элементов в списке слишком велико, следует применить прокрутку

По какой-то причине список (и .wrapper) переполняет страницу, пока я не установлю свойство display:flex в .modal

Может ли кто-нибудь объяснить мне такое поведение, почему .wrapper переполняет своего родителя, хотя у него есть oveflow:hidden и max-height:100% === 30vh родительского элемента до тех пор, пока .modal не будет иметь display:flex

HTML:

СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС СДС HTML:

.modal{ цвет фона: красный; отступ: 3рем; гибкое направление: столбец; разрыв: 1рем; максимальная высота: 30vh; } .элемент{ высота: 30 пикселей; цвет фона: зеленый; } .wrapper{ максимальная высота: 100%; дисплей: гибкий; гибкое направление: столбец; цвет фона: оранжевый; переполнение: скрыто; } .список{ дисплей: гибкий; гибкий: 1; гибкое направление: столбец; разрыв: 1рем; переполнение: прокрутка; } Желаемое поведение заключается в том, что оболочка заполняется входными данными, а остальная часть оболочки заполняется списком. Если количество элементов в списке слишком велико, следует применить прокрутку

По какой-то причине список (и .wrapper) переполняет страницу, пока я не установлю свойство display:flex в .modal

Может ли кто-нибудь объяснить мне такое поведение, почему .wrapper переполняет своего родителя, хотя у него есть oveflow:hidden и max-height:100% === 30vh родительского элемента, пока .modal не будет иметь display:flex