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

[Anonymous]

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

body {
height: 100vh;
margin: 0;
}

.container {
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
}

#child-1 {
min-height: 100%;
background: rgb(255, 179, 179);
}

#child-2 {
min-height: 100%;
background: rgb(135, 135, 232);
z-index: 2;
}

#child-3 {
min-height: 100%;
background: rgb(208, 219, 125);
}

.block {
height: 200px;
width: 50px;
background: rgb(135, 214, 135);
margin-bottom: 10px;
}

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

The contents of #child-2 spill over into #child-3 . For some reason , setting min-height: 100% on #child-2 won't allow it grow past 100% even when its content does . The content of the child elements are dynamic and can sometimes take up less than 100% and sometimes more . If I remove min-height then #child-2 correctly contains all of its content without overflow , but then I wouldn't be handling the case when the content takes up less that 100% height .


Источник: https://stackoverflow.com/questions/781 ... owing-it-g