1

I'm trying to have 2 divs, one with a set width and one with an auto width using flex box. My understanding is that the div with flex-basis auto would take the remaining space in the row.

<div style="display:flex; flex-direction: row; height:160px;  border:1px solid #00CC33">
  <div style="display:inline-block; flex-basis:auto; height:100%; border:1px solid #66BB33"></div>
  <div style="display:inline-block; flex-basis:160px; height:100%; border:1px solid #66BB33;"></div>
</div>

The best is to invite you to check out this fiddle.

How to have the one div at 160px of width and the other one take the remaining space using flex?

Thanks

Asons
  • 84,923
  • 12
  • 110
  • 165
Eric
  • 9,870
  • 14
  • 66
  • 102

1 Answers1

1

flex-basis is the Flexbox property for width (when used in its default row direction), its default is auto and simply mean to be sized by content, kind of like an inline element work.

You should use flex-grow: 1, not flex-basis: auto.

<div style="display:flex; flex-direction: row; height:160px;  border:1px solid #00CC33">
     <div style="display:inline-block; flex-grow: 1; height:100%; border:1px solid #66BB33"></div>
     <div style="display:inline-block; flex-basis:160px; height:100%; border:1px solid #66BB33;"></div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165