Flex with one fixed width column and one fluid column that must fill the remaining space

Question

Is there a way in CSS to have one column with a fixed width, and the second column filling whatever space remains in the row?

.container {
  display: flex;
  border: 1px solid blue;
}

.col1 {
  height: 100px;
  flex: 0 0 80px;
  background: red;
}

.col2 {
  height: 100px;
  background: green;
}

I suspect it's impossible with pure CSS, but if there is a solution then what is the solution?

JSFiddle

Oh yes that works, thanks! If you make an answer I'll accept it. — drake035, Mar 27 '21 at 17:22
someone already posted an answer, you should accept that as an answer :) — Yousaf, Mar 27 '21 at 17:29
Yes he posted it 3 minutes after my comment so I guess he was writing his answer while I posted the comment :) Thank you all! — drake035, Mar 27 '21 at 20:40

Tanner Dolby · Accepted Answer · 2021-03-27T17:38:08.953

Using the flex shorthand property you can use flex: 1 on .col2 which specifies a flex-grow value. You could also as @Yousaf mentioned, explicitly define the flex-grow value by using flex-grow: 1.

The flex-grow CSS property sets the flex grow factor of a flex item's main size. In other words, flex-grow makes a flex item occupy all of the free space on the main-axis.

.container {
  display: flex;
  border: 1px solid blue;
}

.col1 {
  height: 100px;
  flex: 0 0 80px;
  background: red;
}

.col2 {
  height: 100px;
  background: green;
  flex: 1;
  /* flex-grow: 1; This also works! */
}

<div class="container">
  <div class="col1"></div>
  <div class="col2"></div>
</div>

Flex with one fixed width column and one fluid column that must fill the remaining space

1 Answers1