内联弹性容器宽度没有增长

Question

考虑以下布局：

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

PS：如果我使用以下样式，它无处不在：

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

谢谢。

Answer 1

您在当前示例中引用的100px 指的是flex-basis，而不是元素宽度。

Answer 2

来自this SO answer：

影响所有主要浏览器的错误，IE 11 和 Edge 除外：

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

因此，flex: 0 0 100px; 中的 100px flex-basis 无法正常工作（具有讽刺意味的是，在 IE 11 和 Edge 中除外）。

解决方法（也提到here）是使用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，因此背景仍然局限于内容。