How to make a scrollable div with percentage height without either shrinking siblings elements or clipping outside parent?

I'm working on a React project where I need a scrollable div within a layout that uses percentage heights. However, I'm running into an issue where either the scrollable content gets cut off or sibling elements shrink unexpectedly.

I have recreated the layout of my project as minimalistic as possible, but the issue still remains. Heres the jsFiddle:
https://jsfiddle.net/loucims/tk0dj538/17/

When I set overflow: hidden on the #content div, the #flaps div gets shrunk until it's not visible. If I set a min-height to the #flaps div, the list overflows the content, and since #content has overflow: hidden, some content is cut off.

I want the #scrollContainer to be scrollable without shrinking the #flaps div or cutting off content. How can I achieve this?

Any help would be greatly appreciated!