Menu
I'm trying to create a scrollable flex-child whose height is determined by its flex-grow property.
Example:
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.heading {
background: #9D8189;
flex: 0 0 auto;
padding: 2rem;
min-height: 10rem;
}
.content {
background: #FFE5D9;
flex: 1 0 auto;
padding: 2rem;
/* Makes it scrollable but breaks the flexbox layout */
max-height: 40vh;
overflow: scroll;
}
.box {
background: #D8E2DC;
padding: 7rem;
}<body>
<div class="container">
<div class="heading">heading</div>
<div class="content">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</div>
</body>(jsfiddle)
The layout consists of the flex-parent .container and two flex-children:
.heading, that has a fixed height defined by padding and min-height, and .content that is supposed to take all the remaining after .heading space. In order to achieve that, the first flex-child (.heading) has flex: 0 0 auto and the second flex-child (.content) has flex: 1 0 auto. However, I also want .content to have scrollable content inside. For now, the only way I see I can do that is to force .content to have a somewhat fixed height (e.g. via max-height, as I did in the provided example by setting it to 40vh). But while it makes it scrollable, it also breaks the flexbox layout, where content's height is parent height minus heading height.
It seems that as soon as I specify .content height, it stops respecting the flexbox layout, which makes sense. But is there some other way to make it scrollable while retaining its height which is defined by flexbox layout?
612
asked Sep 06 '25 00:09
height:100% requires a known height from parent to be calculated , unless the element is HTML itself.
You need : html, body, {height:100%} so .container {height:100%} as a meaning , height value will be inherited from HTML (browser's window) then by BODY and finally .container .
VH can also be used instead % to make it simple.
.container should be set to overflow:hidden to allow children to scroll once reaching the limit of the parent.
Code sample :
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;/* update */
overflow:hidden;/* update */
}
.heading {
background: #9D8189;
/*flex: 0 0 auto; */
padding: 2rem;
min-height: 10rem;/* if needed */
}
.content {
background: #FFE5D9;
flex: 1 ;/* make it simple */
padding: 2rem;
overflow: auto;/* scroll if needed */
}
.box {
background: #D8E2DC;
padding: 7rem;
} <div class="container">
<div class="heading">heading</div>
<div class="content">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box3</div>
</div>
</div>Put min-height: 0 to .content class style and it should work as you expectm
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
