How to fill the remaining height or width in a flex container with CSS?

Spread the love

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.

Leave a Reply

Your email address will not be published.