Как создать прокручиваемый элемент div с процентной высотой, не сжимая дочерние элементы и не обрезая внешний родительск ⇐ CSS

[Anonymous]

Я работаю над проектом React, где мне нужен прокручиваемый элемент div в макете, использующем процентную высоту. Однако я столкнулся с проблемой: либо прокручиваемый контент обрезается, либо одноуровневые элементы неожиданно уменьшаются.
Я воссоздал макет своего проекта как можно более минималистичным, но проблема все еще остается. Вот jsFiddle:

https://jsfiddle.net/loucims/tk0dj538/17/
Когда я устанавливаю 

Код: Выделить всё

overflow: hidden

 на 

Код: Выделить всё

#content

 div, 

Код: Выделить всё

#flaps

 div сжимается до тех пор, пока его не станет видно. Если я установлю 

Код: Выделить всё

min-height

 в 

Код: Выделить всё

#flaps

 div, список выходит за пределы содержимого, и поскольку 

Код: Выделить всё

#content

 имеет 

Код: Выделить всё

overflow: hidden

часть контента обрезана.
Мне нужен 

Код: Выделить всё

#scrollContainer

 чтобы можно было прокручивать без сжатия 

Код: Выделить всё

#flaps

 div или обрезка содержимого. Как мне этого добиться?
Любая помощь будет принята с благодарностью!

Подробнее здесь: https://stackoverflow.com/questions/790 ... inking-sib