How Can I Make a Specific Flexbox Row Expand to Fill Remaining Vertical Space?

Balancing Vertical Space with Flexbox

Flexbox provides a powerful mechanism for organizing content within a layout. However, it can sometimes be challenging to control the vertical space consumption of a particular row in a multi-row flexbox.

For instance, if you have a scenario where you desire the third row to expand to occupy the remaining vertical space, here's how you can achieve this using flexbox:

To begin with, ensure that the outer container, typically the body and html elements, as well as the parent flexbox container (wrapper), have their heights set to 100%, effectively inheriting the full height of the browser window.

Next, focus on the third row (#row3) within your flexbox layout. Assign a flex value greater than 1 to this row while leaving the other rows with a flex value of 1 or less. This will signal to the browser that the third row should consume more space than the others.

To further refine the layout, you can set the min-height property of the inner columns (#col1, #col2, and #col3) within the third row to 100%. This ensures that they inherit the full height of their parent container (#row3) and adjust their height accordingly.

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%;
}

By implementing these adjustments, you enable the third row to dynamically adjust its height, consuming the remaining vertical space available in the browser window. This provides the desired layout where the third row expands to fill the void and accommodates elements vertically, as required.

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