Categories
CSS

How to expand a div to fill the remaining width with CSS?

Spread the love

To expand a div to fill the remaining width with CSS, we use flexbox.

For instance, we write

<div style="background: #bef">Tree</div>
<div class="second" style="background: #ff9">View</div>

to add 2 divs.

Then we write

html,
body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

to make the body element a flex container with display: flex;.

And we make the div with class second fill the remaining width of the body element with flex-grow: 1;.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *