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.

Answer 1

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.