How to Fill Remaining Vertical Space in a Container with CSS Flexbox?

Fill Remaining Vertical Space with #second

In order to fill the remaining vertical space of #wrapper under #first with #second div using CSS alone, you can employ the following steps:

1. Set html and body to occupy 100% height with no margins.
2. Assign display: flex, flex-direction: column to the parent container .wrapper.
3. Give the specific height to .first.
4. Set flex-grow: 1 to .second to make it stretch to occupy the remaining space.

Here's the CSS code:

<code class="css">html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100%;
}

.first {
  height: 50px;
}

.second {
  flex-grow: 1;
}</code>

<code class="html"><div class="wrapper">
  <div class="first" style="background:#b2efd8">First</div>
  <div class="second" style="background:#80c7cd">Second</div>
</div></code>

The above is the detailed content of How to Fill Remaining Vertical Space in a Container with CSS Flexbox?. For more information, please follow other related articles on the PHP Chinese website!