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.
