Flex items not filling the height of its parent

Question

I have a container with children items:

HTML

<div id="container">
    <div className="item">1</div>
    <div className="item">2</div>
    <div className="item">3</div>
    <div className="item">4</div>
</div>

CSS

#container {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.item {
    flex: 1;
    text-align: center;
    padding: 0px;
    font-size: 30px;
    background: #34ace0;
}

This flexbox container sits inside a grid layout, and the cell to the left of the one here has contents which cause the height of the flexbox shown here to be higher than the contents, as shown here:

I need the squares with the numbers inside to stretch/fill the height of its container, like this

...but with the text centered vertically as well.

I tried setting the height of the .item to 100% but it doesn't fill. Is there something like the free-remaining-space used in grid for flexbox?

Jae Jae · Accepted Answer · 2021-02-10T18:46:26

Make sure the grid layout container has height of 100vh and the container you've shown also has height of 100%. To center the text inside of each item, you can make each of them display: flex.

.grid-container {
    height: 100vh;
}


#container {
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0px;
    font-size: 30px;
    background: #34ace0;
}

Flex items not filling the height of its parent

1 Answers