How to make a div fill up the remaining width with CSS?

To make a div fill up the remaining width with CSS, we use flexbox.

For instance, we write

<div class="main">
  <div class="col-1" style="background: #fc9">Left column</div>
  <div class="col-2" style="background: #eee">Middle column</div>
  <div class="col-3" style="background: #fc9">Right column</div>
</div>

to add nested divs.

Then we write

.main {
  display: flex;
}
.col-1,
.col-3 {
  flex: 0 0 100px;
}
.col-2 {
  flex-grow: 1;
}

to make the outer div a flex container with display: flex;.

And we make the div with class col-2 fill the remaining space with flex-grow: 1;.