Absolutely positioned container not expanding width to fit flexbox content [duplicate]

Question

I have a flexbox inside of an absolutely positioned parent div. I expect the flexbox to have a computed width, causing the parent div to expand, but this doesn't happen. The parent div has some width, but it is not wide enough to accommodate the flexbox.

Given that the flexbox has four children, each with flex-basis: 100px, and flex-shrink: 0, I'd expect the flexbox to have a width of 400px, causing the parent div to expand to 400px of content width. It is instead expanding to a seemingly arbitrary 255px.

.parent {
  position: absolute;
  padding: 10px;
  background: red;
}

.flex {
  display: flex;
}

.flex-child {
  flex: 1 0 100px;
  background: #EEE;
  border: 1px solid black;
  white-space: nowrap;
  overflow: hidden;
}

<div class="parent">
  <div class="flex">
    <div class="flex-child">One</div>
    <div class="flex-child">Two</div>
    <div class="flex-child">Three (really really long)</div>
    <div class="flex-child">Four</div>
  </div>
</div>

Georgeta

I found setting min-width: max-content; on the .flex container works. – Delrosario

Answer 1

Your code works in Edge.

It doesn't work in Firefox and Chrome.

This appears to be a bug with flex-basis in those browsers.

There's a simple workaround: Instead of flex-basis, use width.

.parent {
  position: absolute;
  padding: 10px;
  background: red;
}

.flex {
  display: flex;
}

.flex-child {
  /* flex: 1 0 100px; */

  width: 100px;
  flex-grow: 1;
  flex-shrink: 0;

  background: #EEE;
  border: 1px solid black;
  white-space: nowrap;
  overflow: hidden;
}

<div class="parent">
  <div class="flex">
    <div class="flex-child">One</div>
    <div class="flex-child">Two</div>
    <div class="flex-child">Three (really really long)</div>
    <div class="flex-child">Four</div>
  </div>
</div>

jsFiddle demo

Also see:

• What are the differences between flex-basis and width?

Stressful

I'd like the flexbox to "grow" if the parent happens to be wider than the flexbox (as is expected behavior based on flex: **1** 0 100px). – Georgeta

Add flex-grow: 1 to the .flex-child class. jsfiddle.net/k0gxLw3z – Stressful

flex-basis and width are interchangeable (in row-direction). It appears that flex-basis isn't being handled properly by Chrome and FF. So use width instead. The other flex properties -- flex-grow and flex-shrink -- can still be used in their longhand form. – Stressful

works great. Just after I spent an hour converting it tables.. now I'll convert it back. Update your answer with flex-grow: 1 and I'll happily accept! Thank you. – Georgeta

Just out of curiosity -- is there any way for me to edit your snippet to test things? I know you provided a jsFiddle, but sometimes I encounter answers with snippets only and it's infuriating how I can't fiddle with the snippets. – Georgeta

You can edit my answer and then edit the snippet. And then not save the changes. But that's a bit cumbersome. That's why I always include a jsFiddle in my answer, so that others can play with the code. You can also copy snippet code into the jsfiddle editor, which I do a lot. – Stressful

Yes, jsFiddle is much nicer. I do the same -- but find it cumbersome to c+p into various js/css/html sections. By the way, please add a ; after width: 100px, it's breaking your snippet. I tried to edit but it wanted 6 character change. – Georgeta

Answer 2

The only way I was able to make the elements fit the absolutely positioned element was to change the following line

.flex-child {
    flex: 1 1 100px;
    ...
}

After that the .flex element occupied the .parent element and if I increased any widths the red area expands.

Does that work for you?

Pita

The question is asking for the parent to expand to the width of the content, not the other way around. – Stressful

Because this has flex-shrink: 1, it doesn't enforce the minimum width of 100px per flexchild. As noted above, I'd like this minimum width to be used to stretch the width of the parent (if the parent is not wide enough). – Georgeta