Rahat Ahmed Rahat Ahmed - 16 days ago 7
CSS Question

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?

Answer

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

Comments