如何避免零高度嵌套Flexbox的Chrome bug？

Question

我在使用flexbox遇到了一个奇怪的情况，我希望有一个嵌套的flex容器，它有一个不同的flex方向，但由于某种原因，容器占用了0个高度，导致元素重叠

https://jsfiddle.net/4co25fau/

段：

＆＃13;

＆＃13;

body, html, main {
  height: 100%;
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row
}

.flex-column {
  flex-direction: column
}

.flex-grow {
  flex-grow: 1;
}

.overflow-y-auto {
  overflow-y: auto;
}

＆＃13;

<main class="flex flex-column">
  <div class="flex flex-row">
    <h1>TEST</h1>
    <h1>TEST2</h1>
  </div>
  <h2>SUBTITLE</h2>
  <div class="flex-grow overflow-y-auto">
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
        <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    <div>content</div>
    
  </div>
</main>

＆＃13;

＆＃13;

＆＃13;

这适用于Firefox，但不适用于Chrome。是否有任何变通方法可以避免它？

Answer 1

您可以使用简写flex:1;来简化（并避免从浏览器到浏览器的不同行为），因为容器假设要填充剩下的任何房间。

https://jsfiddle.net/4co25fau/2/

为了安全起见，我会介意主容器上的最小高度，以避免溢出，重叠并缩小到一些容器。

  

@RahatAhmed写道：为了澄清，flex: 1还将flex-basis: 100%设置为默认值，这是解决问题的具体规则

Answer 2

从main＆amp;移除了body, html {}已向其添加overflow: hidden，然后又将height: 100%添加到.flex。

see Fiddle

Answer 3

如果您希望它适合整个屏幕，请使用

height:100vh;

对不起，我会发表评论，但我没有足够的代表。