How to make a div fill the remaining horizontal space with CSS?

Spread the love

Sometimes, we want to make a div fill the remaining horizontal space with CSS.

In this article, we’ll look at how to make a div fill the remaining horizontal space with CSS.

How to make a div fill the remaining horizontal space with CSS?

To make a div fill the remaining horizontal space with CSS, we set flex-grow to 1.

For instance, we write

.container {
  display: flex;
}

.left {
  width: 180px;
}

.right {
  flex-grow: 1;
}

to make the elements with class container a flex container with display: flex;.

Then we set the elements with class right which are the children of the elements with class container to fill the remaining space in the container with flex-grow: 1;.

Conclusion

To make a div fill the remaining horizontal space with CSS, we set flex-grow to 1.

Leave a Reply

Your email address will not be published.