css - 为什么 flex 容器 `flex: 1 0 0px` 在 Chrome 上崩溃了？

Question

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

Answer 1

问题出在 flex-basis 组件上。

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

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

相反，为了跨浏览器的兼容性，使用这个:

flex: 1 0 0%