Here is an example of some HTML code:
.container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
padding: 10px;
background-color: aqua;
}
.box {
width: 100%;
height: 100%;
flex-grow: 1;
background-color: cadetblue;
display: flex;
flex-direction: column;
}
.fill {
flex-grow: 1;
background-color: antiquewhite;
}
.middle {
height: fit-content;
background-color: azure;
justify-self: flex-end;
}
.bottom {
height: fit-content;
background-color: darkgray;
justify-self: flex-end;
}<div class="container">
<h3>Title</h3>
<div>Some Stuff</div>
<div class="box">
<div class="fill">Fill in content here</div>
<div class="middle">This is the middle part</div>
<div class="bottom">This is at the bottom</div>
</div>
</div>The goal is to have the middle and bottom divs stack at the bottom of the screen, while the fill div fills the remaining space without causing a scrollbar or pushing the other divs off the screen. However, the current display does not achieve this as intended:
https://i.stack.imgur.com/oMlFo.png
It's important to note that the middle and bottom divs are hidden, and a scrollbar appears due to the fill div expanding beyond the available height.
To see a demo, check out this StackBlitz link: https://stackblitz.com/edit/angular-ivy-mwtwdg?file=src/app/hello.component.scss