为什么 flex 容器 `flex: 1 0 0px` 在 Chrome 上崩溃？答案

【问题标题】：Why flex container `flex: 1 0 0px` collapses on Chrome?为什么 flex 容器 `flex: 1 0 0px` 在 Chrome 上崩溃？
【发布时间】：2017-11-01 01:56:21
【问题描述】：

在 Chrome 上，我遇到了我不理解的 Flexbox 行为。当同时也是 flex 容器的 flex 子级具有 flex: 1 0 0px 时，它会折叠自身及其内容。

即使flex-basis 设置为0px，据我所知，将flex-grow 设置为1（flex 速记中的第一个数字）应该会使项目在需要时增长。

在我的示例中，.bottom-container 将 height 设置为 300px。 height 在 Firefox 上受到尊重，但在 Chrome 上折叠为 0px。为什么？

.top-container {
  display: flex;
  flex-flow: column nowrap;
}

.middle-container {
  flex: 1 0 0px;
  display: flex;
  flex-flow: column nowrap;
}

.bottom-container {
  flex: 0 0 auto;
  height: 300px;
}

<div class="top-container">
  <div class="middle-container">
    <div class="bottom-container"></div>
  </div>
  <div class="middle-container">
    <div class="bottom-container"></div>
  </div>
</div>

【问题讨论】：

Flex: 1 0 0 ; 告诉flex-basis:0;，我想说，chrome 的行为是正确的 :(
@G-Cyr: 但是没有设置flex-grow: 1 应该让项目在需要时可以增长？有时我需要设置 flex-basis: 0 以确保所有 flex 子节点的大小完全相同。
它不连贯，将其调整为零并允许它同时增长，使用 auto 作为 flex-basis 值，然后每个 flex 设置都按预期工作；）就像：宽度:0;最大宽度：100%；逻辑有冲突
@G-Cyr：是的，flex: 1 0 0 肯定没有明确声明它想要完成什么。但这是一个有效的声明——基本大小为 0px，然后增长到使用所有剩余空间——我不明白为什么它不起作用。
flexbox 规范中没有关于浏览器应如何解释 flex-basis 值的不同单位的指导。即使您是正确的，我也不推荐无单位值，它是一个有效的声明。

标签： css google-chrome flexbox

【解决方案1】：

问题出在flex-basis 组件上。

当您拥有flex-basis: 0 时，Chrome 和 Firefox 计算为flex-basis: 0px。

但是，像素值会破坏您在 Chrome 中的布局。

相反，为了跨浏览器的兼容性，请使用：

flex: 1 0 0%

【讨论】：

我不明白的部分是为什么 px 值会破坏 Chrome 中的布局？
这就是 Chrome 渲染 px 与 % 单位的方式。暂时忘记flex-basis。请改用height。一样。 codepen.io/anon/pen/ooXEvO
Chrome / Safari 和 Firefox 呈现高度不同的历史，尤其是在 flex 容器中。 stackoverflow.com/q/33636796/3597276
@Michael_B：好的，我明白了，谢谢。现在我正在努力解决它:)。
我还说过，浏览器正在从对规范的传统解释演变而来，并考虑到其他形式的高度。在 Chrome 和 FF 之间的 flex 渲染行为中，我可以立即计算出至少 6 个差异。 Chrome even goes completely off-spec once in a while. 为什么，你问？我只能猜测。

【解决方案2】：

好的，这就是逻辑。

您没有指定高度为 .top-container，所以它是子元素 (.middle-container)无法增长，因为它们没有空间进入，尽管有 flex: 1 0 0 并且因此，.middle-container 元素将始终保持高度为 0。

【讨论】：