如何使flexbox项目在嵌套容器中正确收缩？

Question

如果我像这样设置嵌套的flexbox容器：

<div class="container1">
  <div class="grow1">
    <div class="container2">
      <div class="grow2"></div>
    </div>
  </div>
</div>

......然后设置生长2的宽度，使其比容器1宽，然后生长2溢出容器1。

我认为这不应该发生，因为当flex元素比flex容器大时，它们应该收缩。

如果我设置了生长2的灵活基础，那么这就像预期的那样工作。

有关演示，请参见以下示例：

https://jsfiddle.net/chris00/ot1gjjtk/20/

请使用Chrome或火狐

此外，我读到flexbox规范说宽度和FlexBasis应该有相同的效果（当使用水平布局时），但它们显然没有。

现在我可以用弹性基础代替宽度，但是。。。Edge对flex basis和width都做相同的事情，但它的方式是“错误的”。IE11也犯了错误（尽管它似乎有多个flexbox bug）。请使用Edge查看演示。

那么这是怎么回事？

所有浏览器都有bug吗？

flex basis是否应该与宽度不同（在简单的水平布局中）？

或者边缘是否正确，宽度和弹性基准是否都会溢出父容器？

最后，是否有一个解决办法可以修复Edge（甚至IE11）的溢出？

.container1 {
  margin-top: 10px;
  display: flex;
  width: 200px;
  height: 50px;
  background-color: red;
}

.grow1 {
  flex-grow: 1;
  height: 40px;
  background-color: green;
}

.container2 {
  display: flex;
  height: 30px;
  background-color: yellow;
}

.grow2a {
  flex-grow: 1;
  flex-basis: 400px;
  height: 20px;
  background-color: turquoise;
}

.grow2b {
  flex-grow: 1;
  width: 400px;
  height: 20px;
  background-color: turquoise;
}

<div class="container1">
  <div class="grow1">
    <div class="container2">
      <div class="grow2a">Working (flex-basis)</div>
    </div>
  </div>
</div>

<div class="container1">
  <div class="grow1">
    <div class="container2">
      <div class="grow2b">Not working (width)</div>
    </div>
  </div>
</div>

Answer 1

就规范而言，这不是一个与flex基础、宽度、flex-增长或flex有关的问题。这是完全不同的事情。

4.5. 弹性物品的隐含最小尺寸

为了为弹性物品提供更合理的默认最小尺寸，本规范引入了一个新的auto值作为CSS 2.1中定义的min width和min height属性的初始值。

换句话说，默认情况下，弹性项不能小于其内容的长度（本质上是最长的单词或固定大小的元素）。

该项不能停留在其容器内（甚至不能呈现滚动条或省略号），因为不允许其内容溢出。内容只是扩展项目。此行为也适用于固定大小（例如代码中的flex-basis:400px）。

同样，初始设置是：

• 最小宽度：自动，在行方向
• 最小高度：自动，在列方向

有关更完整的解释，请参阅这篇文章：

• 为什么flex项不缩小过去的内容大小？

这个问题的标准解决方案很简单：覆盖默认值。

在代码中，将最小宽度：0添加到。增长1。

这解决了Chrome、Safari、FF和Edge中的问题。

css prettyprint-override">.container1 {
  margin-top: 10px;
  display: flex;
  width: 200px;
  height: 50px;
  background-color: red;
}

.grow1 {
  flex-grow: 1;
  height: 40px;
  background-color: green;
  min-width: 0; /* NEW */
}

.container2 {
  display: flex;
  height: 30px;
  background-color: yellow;
}

.grow2a {
  flex-grow: 1;
  flex-basis: 400px;
  height: 20px;
  background-color: turquoise;
}

.grow2b {
  flex-grow: 1;
  width: 400px;
  height: 20px;
  background-color: turquoise;
}

html prettyprint-override"><div class="container1">
  <div class="grow1">
    <div class="container2">
      <div class="grow2a">Working (flex-basis)</div>
    </div>
  </div>
</div>

<div class="container1">
  <div class="grow1">
    <div class="container2">
      <div class="grow2b">Not working (width)</div>
    </div>
  </div>
</div>