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.