How To Style Last Item With Remaining Available Height In CSS.

Let us give a brief explanations before showing a code sample:

height: 100% set the height of container as viewport height.

display: flex enables flexbox.

flex-direction: column set the direction of flex items' order from top to down.

flex-grow: 1 the flexbox will apply remaining available space of container to last child element.

The parent must have a viewport height. flex-grow: 1 could be applied to the first or second element, which will have all available space.

Now, here is the code sample of the explanation above:

HTML

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
</div>

CSS

html,
body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container > div:last-child {
  background-color: tomato;
  flex: 1;
}

Take advantage of available viewport space by giving the last element the remaining available space in the current viewport, even when resizing the window.

Happy Coding!

I love you all.

Thanks for taking your time in reading this article...

Think twice, code once.