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;}<div class='container'><div id='child-1'><div class='block'></div></div><div id='child-2'><div class='block'></div><div class='block'></div><div class='block'></div><div class='block'></div><div class='block'></div><div class='block'></div><div class='block'></div></div><div id='child-3'></div></div>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 .