Question

在Chrome上我遇到了Flexbox行为，我不明白。当flex子容器也是一个flex容器flex: 1 0 0px时，它会折叠自己及其内容。

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

问题在于flex-basis组件。

当您flex-basis: 0时，Chrome和Firefox会计算到flex-basis: 0px。

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

相反，对于跨浏览器兼容性，请使用：

flex: 1 0 0%

Answer 2

好的，这就是逻辑。

您尚未指定.top-container的高度，因此它的子元素（.middle-container）无法增长，因为它们没有空间让成长为，尽管有flex: 1 0 0，因此.middle-container元素的高度始终为0。

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

2 个答案: