Inline Flex Container Width Not Growing

Consider the following layout:

testtest test test test test

Solution 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;
}

<divclass="div"><spanclass="span1">test</span><spanclass="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.

Solution 2:

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