After reviewing your stackblitz demo, it seems that this is the layout you are looking for (please confirm if it's correct): Stackbliz demo
<div class="container">
<div class="header">
The height of this header section is variable and may need adjustments.
</div>
<div class="content">
The height of this content section is dependent on the height of the 'header' section. It might be empty if the combined heights
of all three sections are smaller than the screen height. When the height of the header section increases, the height of this
section decreases.
</div>
<div class="bottom-div">
This section always stays at bottom of the container, which itself has a height equal to the screen height. The height
of this bottom area remains constant.
</div>
</div>
.container {
display: flex;
flex-direction:column;
&>* {
flex-shrink: 0;
}
border: 1px solid red;
height: 100vh;
}
.header {
margin: 5px;
border: 1px solid black;
}
.content {
flex: 1;
margin: 10px;
border: 1px solid black;
}
.bottom-div {
margin: 10px;
border: 1px solid gray;
}