Absolutely positioned container not expanding width to fit flexbox content

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>

Michael Benjamin · Accepted Answer · 2019-12-05T03:31:37.500

2

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?

edited Dec 05 '19 at 03:31

answered Dec 05 '19 at 02:58

Michael Benjamin

346,931
104
581
701

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`). – JS_Riddler Dec 05 '19 at 03:00
Add `flex-grow: 1` to the `.flex-child` class. https://jsfiddle.net/k0gxLw3z/ – Michael Benjamin Dec 05 '19 at 03:03
`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. – Michael Benjamin Dec 05 '19 at 03:05
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. – JS_Riddler Dec 05 '19 at 03:07
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. – JS_Riddler Dec 05 '19 at 03:09
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. – Michael Benjamin Dec 05 '19 at 03:14
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. – JS_Riddler Dec 05 '19 at 03:21

Mihail Minkov · Answer 2 · 2019-12-05T01:44:27.940

0

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?

edited Dec 05 '19 at 01:44

answered Dec 05 '19 at 01:28

Mihail Minkov

2,463
2
24
41

The question is asking for the parent to expand to the width of the content, not the other way around. – Michael Benjamin Dec 05 '19 at 02:54
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). – JS_Riddler Dec 05 '19 at 03:02

Absolutely positioned container not expanding width to fit flexbox content

2 Answers2

Linked