If you have a .container that is set as a flexbox, it's recommended to utilize flex properties to control the dimensions of its children. A good approach would be to set the children with flex: 0 0 100%.
To break it down:
/* do not take up extra space */
flex-grow: 0;
/* do not shrink when there's insufficient space */
flex-shrink: 0;
/* designated size for the primary axis of the flexbox (in this scenario, vertical), which is 100% of their parent's height */
flex-basis: 100%;
body {
height: 100vh;
margin: 0;
}
.container {
height: 100%;
overflow: auto;
display: flex;
flex-direction: column;
}
#child-1 {
flex: 0 0 100%;
background: rgb(255, 179, 179);
}
#child-2 {
flex: 0 0 100%;
background: rgb(135, 135, 232);
z-index: 2;
}
#child-3 {
flex: 0 0 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>