I’ve been trying to use flexbox in a situation where I’d like a grandchild to try and use the remaining space of a div that it’s sibling and parent’s siblings aren’t using, overflowing once it’s contents fill with text. However, the grandchild has been flowing outside of the div instead of overflowing and scrolling.

Example code:

.parent {
    height: 100px;
    display: flex;
    flex-direction: column;
}

.sibling {
    flex: 0 0 10px;
}

.child {
    margin: 10px;
    display: flex;
    flex-direction: row;
}

.child-top {
    flex: 0 0 10px;
}

.child-body {
    overflow-y: scroll;
}

<div class="parent">
    <div class="sibling"> </div>
    <div class="child">
        <div class="child-top"> </div>
        <div class="child-body"> ~A Ton of Text~ </div>
    </div>
</div>

So what I’d LIKE to happen is that the entire HTML takes up 100px. The sibling takes up 10px, the child has 20px total of margin, and then the top of the child has 10px. This would leave 60px for text in .child-body – and once or if that text takes up the entire div, a scrollbar appears and any text after 60px gets cut off.

Instead, regardless of where I put overflow-y, the text flows outside of .child-body.

This doesn’t have to be a flexbox fix, any css that does this right is welcome.