内联柔性容器宽度不增长

考虑以下布局：

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

和CSS：

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

为什么 div 没有拉伸到足以覆盖两个跨度？这种情况发生在 FF 和 Chrome 中。在 IE 11/Edge 中它可以工作（正如我所期望的那样） 这是小提琴https://jsfiddle.net/p18h0jxt/ https://jsfiddle.net/p18h0jxt/

PS：如果我使用以下样式，它在任何地方都有效：

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

Thanks.

From 这个答案 https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width:

影响除 IE11 和 Edge 之外的所有主要浏览器的错误：

正如你所说 - 显然flex-basis在嵌套的弹性容器中不受尊重。

So your 100px弹性基础来自flex: 0 0 100px;无法正常工作（讽刺的是，在 IE11 和 Edge 中除外）。

解决方法（也提到了here https://stackoverflow.com/questions/45482350/chrome-does-not-expand-flex-parent-according-to-childrens-content）是使用width代替flex-basis像这样：

.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>

你可以使用flex代替inline-flex，但是你的div将像块元素一样呈现，即它将占据可用的完整宽度，而不是局限于您的内容。

我假设你正在使用inline-flex以便背景仍然局限于内容。