Гибкий дочерний элемент, переполняющий родительскую высоту в модальном режиме ⇐ CSS

[Anonymous]

Я пытаюсь создать модальный экран, используя CSS, HTML. Код ниже:

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

.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(0, 0, 0, 0.6);
}

.content {
border-radius: 4px;
background-color: white;
padding: 16px;
height: 80vh;
width: 80vw;
}

.title {
padding: 16px;
}

.body {
padding: 16px;
height: 100%;
width: 100%;
background-color: blue;
min-height: 0;
}

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

The bugged modal screen

This is overflowing

Как показано в примере, гибкий дочерний элемент (синее содержимое) переполняет свой родитель. Я пытался использовать min-height: 0, похоже, у меня не работает. Как я могу поместить ребенка внутрь его границ?

Подробнее здесь: https://stackoverflow.com/questions/653 ... t-in-modal