Html 内联flex容器宽度未增长

考虑以下布局：

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

为什么潜水舱的伸展宽度不足以覆盖两个跨度？这发生在FF和Chrome中。在IE 11/Edge中，它可以工作（正如我所期望的那样） 这是小提琴

PS：如果我使用以下样式，它适用于任何地方：

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

---

谢谢。

您在当前示例中提到的

100px

指的是

flex basis

而不是元素宽度。

来自：

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

正如您所说，显然

flex-basis

在嵌套的flex容器中不受尊重

因此，您的

100px

flex基础来自

flex:0 100px不能正常工作（讽刺的是在IE 11和Edge中除外）

解决方法（也提到）是使用
width
而不是
flex basis
如下：


.div{
显示：内联flex；
背景颜色：浅灰色；
}
.span1{
宽度：100px；
}
.span2{
空白：nowrap；
}

测试
测试测试
我知道，但在初始宽度计算过程中（如果弹性方向为行），弹性基准用作宽度。是的，但将父级
div
设置为
内联弹性
会抵消这一点谢谢！我以为是IE出了问题。事实上，讽刺的是IE在这一点上是正确的。没问题：）直到你提到这个错误，我才知道它，所以谢谢你！虽然问题看起来确实是一个bug，但我不确定您的bug引用是否适用。在该引用中，问题发生在嵌套的flex容器中。本例中的flex容器不是嵌套的。它是主要的也是唯一的容器。我注意到
嵌套的
引用也是如此。我找不到此错误的文档，但您的答案是最接近的。似乎设置了
inline flex
的主容器遇到了这个问题，并且
flex-basis
无法在子容器上可靠地使用。我会看得更远。显示了试图在
内联flex
容器的子容器上使用
flex basis
时遇到类似问题的人。我将此错误添加到参考答案中。另外，底线是，你的答案确实解决了问题。
.span1{
   flex:0 0 auto;
   width:100px;
}