I am looking to create a vertical div that stretches to the height of its parent container and contains smaller divs. If there is extra space, all divs except for the last one should be positioned at the top, with the last div placed at the bottom. I used Bootstrap and flex to achieve this layout.
Recently, I wanted to improve the design by making sure that when possible, the bottom div sticks to the bottom of the viewport rather than just the containing div. I tried implementing this using position: sticky, which worked in Chrome but not in Firefox, even though both browsers support it.
Here is my code:
<div id="container" class="d-flex flex-column">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="d-flex flex-column last">
<div class="flex-item mt-auto last-inner">3</div>
</div>
</div>
CSS:
#container {
height: 1000px;
}
#container .last {
flex: 1;
}
#container .last-inner {
position: sticky;
bottom: 0;
}