How to Prevent Flex Column Child from Expanding Parent Height?

Question

I have the following code:

<div class="container">
    <div class="left">
        <!-- Children expands parent past container height -->
    </div>
    <div class="right">

    </div>
<div>

<style>
.container {
    width: 100%;
    height: 100%;
    display: row;
    flex-direction: column;
}

.container .left {
    width: 300px;
    height: 100%;
    overflow-y: auto;
}

.container .right {
    flex: 1 1 auto;
    height: 100%;
}
</style>

But when I add elements to the .left div, the height expands instead of scroll.

How can I have the .left div to scroll it's content instead of expand in height?

Add `body { height: 100vh }`. Explained here: https://stackoverflow.com/a/31728799 — Michael Benjamin, Jan 16 '23 at 16:29
Works with the code you posted in the question: https://jsfiddle.net/kroxmgzu/1/ — Michael Benjamin, Jan 16 '23 at 16:35

score 0 · Answer 1 · answered Jan 16 '23 at 16:22

I believe that all you need to do is set a height for .left in px or whatever you prefer. This will lead the div to scroll if the content goes over that set height. I have made the change below

.container .left {
width: 300px;
height: 300px;
overflow-y: auto;
background-color: blue;

}

Or you could also make a set height for your .container which would also force your .left to overflow once it fills up it's space in the container. Shown Below:

.container {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
}

I hope this helps!

How to Prevent Flex Column Child from Expanding Parent Height?

1 Answers1