Q:

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?

A:

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.

@RahatAhmed wrote: To clarify, flex: 1 also sets flex-basis: 100% as a default, which is the specific rule that fixes the issue

