inline flex container width not growing

Question

Consider the following layout:

<div class="div">
  <span class="span1">test</span>
  <span class="span2">test test test test test</span>
</div>

and the css:

.div{
   display:inline-flex;
   background-color:lightgray;
}
.span1{
   flex:0 0 100px;
}
.span2{
   white-space:nowrap;
}

Why isn't the div stretched wide enough to cover the two spans? This happens in FF and Chrome. In IE 11/Edge it works (as I would expect it to work) Here's the fiddle https://jsfiddle.net/p18h0jxt/

PS: It works everywhere if I used the following style:

.span1{
   flex:0 0 auto;
   width:100px;
}

Thanks.

score 4 · Accepted Answer · answered Oct 11 '17 at 12:10

4

From this SO answer:

Bug affecting all major browsers, except IE 11 & Edge:

Just as you said - apparently flex-basis is not respected in a nested flex container.

So your 100px flex-basis from flex: 0 0 100px; can't work properly (except ironically in IE 11 & Edge).

The workaround (also mentioned here) is to use width instead of flex-basis like so:

.div {
  display: inline-flex;
  background-color: lightgray;
}

.span1 {
  width: 100px;
}

.span2 {
  white-space: nowrap;
}

<div class="div">
  <span class="span1">test</span>
  <span class="span2">test test test test test</span>
</div>

You could use flex instead of inline-flex, but then your div will be rendered like a block element i.e. it will take up the full width that's available rather than being confined to your content.

I assume you are using inline-flex so that the background remains confined to the content.

answered Oct 11 '17 at 12:10

Dan Kreiger

5,358
2
23
27

2

Thanks! I thought the bug was in IE. Indeed it is ironic that IE is correct on this one. lol – Dr Sitecore Oct 11 '17 at 12:20
No problem :) I never knew about this bug until you mentioned it so thanks for that! – Dan Kreiger Oct 11 '17 at 12:49
Although the problem does appear to be a bug, I'm not sure that your bug reference applies. In that reference, the problem occurs in *nested flex containers*. The flex container in this case is not nested. It's the primary and only container. – Michael Benjamin Oct 11 '17 at 13:08
1

I noticed that `nested` reference too. I can't find documentation for this bug, but your answer was the closest. It seems that primary containers set with `inline-flex` experience this issue and `flex-basis` can't be used reliably on the children. I'll look further. [This link](https://stackoverflow.com/questions/40365718/inline-flex-container-display-inline-flex-is-expanding-the-full-width-of-pare) shows someone experiencing similar problems when trying to use `flex-basis` on the children of an `inline-flex` container. – Dan Kreiger Oct 11 '17 at 13:28
I added this bug to the referenced answer. Also, bottom line, your answer does solve the problem. – Michael Benjamin Oct 11 '17 at 13:33
Yes! That was a great answer by @Oriol. I remember that post. He had a good explanation going over how flex layout renders `flex-basis` and `width` in different order, which is why `width` works. – Michael Benjamin Oct 11 '17 at 13:38

score 1 · Answer 2 · answered Oct 11 '17 at 11:58

1

The 100px you refer to in your current example refers to flex-basis not the element width.

answered Oct 11 '17 at 11:58

Scott Brown

334
1
2
13

I know, but flex-basis is used as width during initial width calculation (if flex-direction is row). – Dr Sitecore Oct 11 '17 at 11:59
Yes, but setting your parent `div` as `inline-flex` negates this – Scott Brown Oct 11 '17 at 12:00

inline flex container width not growing

2 Answers2

Linked