html - Nested child scroll/overflow

Question

Here's the codesandbox, as the code is too much to post here, given the nested elements.

I'd like to have:

• a horizontal scroll for the .content div.
• a vertical scroll just for the .group-body div.

I've tried everything and I can't get it to work.

This rule does make it "work", but I feel like it's not optimal.

.body{
    height: 90vh;
}

Answer 1

You just need to specify max-height for .group-body and then overflow-y will work as expected.

See this fix in your code