Reputation: 2180

How to avoid Chrome bug with zero height nested flexbox?

I've run into a weird situation with flexbox where I'd like to have a nested flex container with a different flex-direction, but for some reason that container takes up 0 height, causing elements to overlap.

https://jsfiddle.net/4co25fau/

Snippet:

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

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

This works in Firefox, but not Chrome. Are there any workarounds to avoid it?

Upvotes: 1

Answers (3)

G-Cyrillus

Reputation: 105843

You may just use the shorthand flex:1; to make it simple(and avoid different behavior from browser to browser) since the container is suppose to be filling whatever room is left.

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

For safety, i would mind a min-height on the main container to avoid overflow, overlap and to shrink down to 0 some of the containers.