Scroll in a deeply nested flex container - min-height not working - html

Question

I have the following flex layout. I need overflow to occur in div.stretchy. I would like div.stretchy to reach the boundary of the page and then overflow it's content. Per this stackoverflow post, I have tried many combinations of min-height: 0 and overflow: hidden, but div.stretchy will not shrink.
body {
margin: 0;
}
.page-wrapper {
display: flex;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.sidebar {
background: blue;
flex: 0 0 40px;
}
.main {
background: green;
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
}
.topbar {
display: flex;
flex: 0 0 40px;
background-color: red;
}
.content {
display: flex;
overflow: auto;
}
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
}
.grow {
flex-grow: 1;
}
.card {
height: 300px;
border: solid 1px;
min-width: 600px;
}
.card .row {
justify-content: space-between;
}
.wrapper {
padding: 16px;
height: fit-content;
}
.stats {
padding: 8px;
background-color: pink;
}
.overflow-hidden {
overflow: hidden;
}
.body .column {
background-color: indigo;
}
.wide-content {
background-color: yellow;
height: 50px;
width: 800px;
}
.block {
flex: none;
width: 300px;
height: 200px;
&:nth-of-type(odd) {
background: darken(green, 10%);
}
}
<div class="page-wrapper">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="topbar">topbar</div>
<div class="content">
<div class="wrapper">
<div class="card column grow">
<div class="stats row">
<span>12345</span>
<span>12345</span>
<span>12345</span>
</div>
<div class="body row grow">
<div class="column">
<span>Dynamic Width Content</span>
</div>
<div class="stretchy column grow overflow-hidden">
<div class="wide-content grow"></div>
</div>
<div class="column">
<span>Dynamic Width Content</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

This is a tough battle. The enemy is cunning, deceitful and ruthless. I say we launch a massive carpet bombing campaign, showering the whole area with min size overrides. That should clear out 80% of the problem. Then we send in the ground troops to finish the job :-)
* {
min-width: 0 !important;
min-height: 0 !important;
}
.page-wrapper {
display: flex;
height: 100vh;
/* width: 100vw; */
/* overflow: hidden; */
}
.sidebar {
background: cornflowerblue;
/* flex: 0 0 40px; */
flex: 0 0 100px; /* changed for demo purposes */
}
.main {
background: lightgreen;
display: flex;
flex-direction: column;
flex: 1;
}
.topbar {
display: flex;
flex: 0 0 40px;
background-color: orangered;
}
.content {
display: flex;
/* overflow: auto; */
flex: 1; /* added */
}
.row {
display: flex;
}
.column {
display: flex;
flex-direction: column;
}
.grow {
flex-grow: 1;
}
.card {
/* height: 300px; */
border: solid 1px;
min-width: 600px;
}
.stretchy {
overflow: auto;
}
.card .row {
justify-content: space-between;
}
.wrapper {
padding: 16px;
/* height: fit-content; */
display: flex; /* added */
}
.stats {
padding: 8px;
background-color: pink;
}
.overflow-hidden {
/* overflow: hidden; */
}
.body .column {
background-color: violet;
}
.wide-content {
background-color: yellow;
height: 50px;
width: 800px;
}
body {
margin: 0;
}
/*
.block {
flex: none;
width: 300px;
height: 200px;
&:nth-of-type(odd) {
background: darken(green, 10%);
}
}
*/
<div class="page-wrapper">
<div class="sidebar">sidebar</div>
<div class="main">
<div class="topbar">topbar</div>
<div class="content">
<div class="wrapper">
<div class="card column grow">
<div class="stats row">
<span>12345</span>
<span>12345</span>
<span>12345</span>
</div>
<div class="body row grow">
<div class="column">
<span>Dynamic Width Content</span>
</div>
<div class="stretchy column grow overflow-hidden">
<div class="wide-content grow">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br></div>
</div>
<div class="column">
<span>Dynamic Width Content</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
jsFiddle demo