How to Make a Flexbox Row Fill Remaining Vertical Space?

Achieving 100% Vertical Space Utilization in a Flexbox Layout

Flexbox is a powerful layout system that allows developers to create responsive and dynamic layouts. One common scenario is to have a flexbox layout row that automatically consumes the remaining vertical space within a browser window. This article explores how to achieve this using Flexbox properties.

The Challenge:

Consider a three-row flexbox layout with the first two rows having fixed heights. The challenge is to make the third row grow vertically to fill the remaining space of the browser window, allowing its content to expand accordingly.

The Solution:

The key to achieving this behavior is setting the "flex" property of the third row to a value greater than 1. This instructs the flexbox to grow the row beyond its intrinsic size and distribute the remaining space among its children. However, setting a height attribute to 100% won't work because the content within the row doesn't naturally fill the browser window.

Implementing the Solution:

To properly implement this layout, ensure that the following principles are applied:

• Set the height of the html, body, and the parent div (wrapper) to 100%. This inheritance allows the third row to inherit the full height of the browser window.
• Set the flex property of the third row to a value greater than 1 (e.g., flex: 2). This forces the row to grow vertically and utilize the remaining space.
• Consider adding a min-height of 100% to the columns within the third row. While not necessary in most modern browsers, it can provide cross-browser compatibility.

Example Code:

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

.wrapper {
    display: flex;
    flex-direction: column;
}

#row1 {
    background-color: red;
}

#row2 {
    background-color: blue;
}

#row3 {
    background-color: green;
    flex: 2;
    display: flex;
}

#col1 {
    background-color: yellow;
    flex: 0 0 240px;
    min-height: 100%;
}

#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%;
}

#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%;
}

Conclusion:

By following these guidelines, you can easily create a flexbox layout that automatically consumes the remaining vertical space in a browser window. This technique is particularly useful for responsive designs where the content height may vary significantly.

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