内联flex容器宽度不增加

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无法延伸到覆盖两个span？这种情况在Firefox和Chrome中发生。 在IE 11 / Edge中它可以正常工作（就像我期望的那样）

这是示例链接: https://jsfiddle.net/p18h0jxt/

顺便说一下：如果使用以下style，则在所有浏览器中均可正常工作：

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

谢谢。

- Dr Sitecore

Answer 1

以下内容来源于这个StackOverflow帖子：

除了IE 11和Edge外，所有主流浏览器都存在一个bug：

正如你所说 - 似乎在嵌套的flex容器中不会考虑flex-basis。

因此，flex: 0 0 100px;中的100px flex-basis无法正常工作（令人讽刺的是在IE 11和Edge中可以正常工作）。

解决方法（也在这里提到）是使用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是为了使背景仅限于内容。

- Dan Kreiger

---

谢谢！我以为这个bug是在IE里的，但实际上讽刺的是，这次IE是正确的。哈哈 - Dr Sitecore

没问题 :) 直到你提到它，我才知道这个漏洞，所以谢谢！ - Dan Kreiger

虽然问题似乎是一个错误，但我不确定你提到的错误参考是否适用。在那个参考中，问题出现在嵌套的flex容器中。而在这种情况下，flex容器并没有嵌套。它是主要且唯一的容器。 - Michael Benjamin

我也注意到了nested的引用。我找不到关于这个bug的文档，但是你的回答最接近。似乎使用inline-flex设置为主要容器会遇到这个问题，并且子元素上不能可靠地使用flex-basis。我会继续寻找。这个链接显示了当尝试在inline-flex容器的子元素上使用flex-basis时，有人遇到类似的问题。 - Dan Kreiger

我在参考答案中添加了这个 bug。总之，你的答案确实解决了问题。 - Michael Benjamin

是的！@Oriol 给出了一个很好的答案。我记得那篇帖子。他详细解释了 flex 布局如何以不同的顺序渲染 flex-basis 和 width，这就是为什么 width 起作用的原因。 - Michael Benjamin

Answer 2

在你当前的示例中提到的 100px 是指 flex-basis 而不是元素宽度。

- Scott Brown

---

我知道，但是在初始宽度计算期间（如果 flex-direction 是行），flex-basis 会被用作宽度。 - Dr Sitecore

是的，但将父级 div 设置为 inline-flex 可以抵消这个问题。 - Scott Brown