Add min-height: 0
to .flexGrowWrapper
– see demo below:
$("button").click(function() {
$(".resize").toggleClass("small");
});
.resize {
height: 200px;
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 300px;
}
.resize.small {
height: 100px;
}
.heading {
flex: 0 0 auto;
}
.flexGrowWrapper {
border: 2px solid red;
flex-grow: 1;
min-height: 0; /* ADDED */
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
display: flex;
flex-direction: row;
clear: both;
}
<button>
Resize
</button>
<div class="resize">
<div class="heading">
<label>Some heading that wont scroll</label>
</div>
<div class="flexGrowWrapper">
<div class="wrapper">
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
<div>
Something else here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Why this works
Note that this is because for a column flexbox the default min-height
value is auto
(along the flex axis). You can see some examples of this behaviour below: