How Can I Make a Flexbox Row Fill the Remaining Vertical Space in a Browser Window?

Making Your Flexbox Layout Consume the Remaining Vertical Space

A flexbox layout's third row needs to dynamically expand to fill the browser window's remaining height. To achieve this, employ the following steps:

1. Set the height of html, body, and the parent flexbox container (.wrapper) to 100% to inherit the parent's full height.
2. Apply a flex value greater than 1 to the third row (.row3) only, leaving the other rows with their original heights. This will give .row3 the ability to grow.
3. Add the following code inside the .wrapper class to ensure that the columns recognize the full browser height:

.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%; /* Chrome needed this initially */
}
#col2 {
    background-color: orange;
    flex: 1 1;
    min-height: 100%; /* Chrome also needed this at one point */
}
#col3 {
    background-color: purple;
    flex: 0 0 240px;
    min-height: 100%; /* Chrome might need this for a bit */
}

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