Sometimes, wee want to fill the remaining height or width in a flex container with CSS.
In this article, we’ll look at how to fill the remaining height or width in a flex container with CSS.
How to fill the remaining height or width in a flex container with CSS?
To fill the remaining height or width in a flex container with CSS, we use flexbox.
For instance, we write
<div class="row">
<div class="left">Left</div>
<div class="separator"></div>
<div class="right">Right With Text</div>
</div>
<div class="row">
<div class="left">Left With More Text</div>
<div class="separator"></div>
<div class="right">Right</div>
</div>
<div class="row">
<div class="left">Left With Text</div>
<div class="separator"></div>
<div class="right">Right With More Text</div>
</div>
to add some nested divs.
Then we write
.row {
background: lightgray;
height: 30px;
width: 100%;
display: flex;
align-items: flex-end;
margin-top: 5px;
}
.left {
background: lightblue;
}
.separator {
flex-grow: 1;
border-bottom: dotted 2px black;
}
.right {
background: coral;
}
to make the div with class row a flex container with display: flex;.
And we make the divs with class separator fill the remaining space with flex-grow: 1;.
Conclusion
To fill the remaining height or width in a flex container with CSS, we use flexbox.
