How to Fill Remaining Vertical Space in a Wrapper Div with a Second Div Using CSS?

Using CSS to Fill Vertical Space

Question:

You have a layout with a #wrapper div containing #first and #second divs. You need to fill the remaining vertical space of #wrapper beneath #first with #second, using only CSS.

Solution:

1. Flexbox Layout:

   • Set the wrapper div to display: flex and flex-direction: column. This sets up a vertical layout.
   • Set the height of the wrapper to 100%.

2. Height Control:

   • Set the height of the first div to a fixed value (e.g., 50px) to ensure it won't expand.

3. Flex-Grow Property:

   • Use the flex-grow property on the second div. This property allows the second div to expand vertically and fill the remaining space. Set flex-grow to 1 to make it flexible.

Code Example:

<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>

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