如何制作具有百分比高度的可滚动 div，而不缩小同级元素或剪裁外部父元素？

Question

我正在开发一个 React 项目，我需要在使用百分比高度的布局中使用可滚动的 div。但是，我遇到了一个问题，即可滚动内容被切断或同级元素意外收缩。

我已经尽可能简约地重新创建了项目的布局，但问题仍然存在。这是 jsFiddle:
https://jsfiddle.net/loucims/tk0dj538/17/

当我在

overflow: hidden

div 上设置

#content

时，

#flaps

div 会缩小，直到不可见。如果我给

min-height

div设置了

#flaps

，列表就会溢出内容，并且由于

#content

有

overflow: hidden

，所以一些内容会被截断。

我希望

#scrollContainer

可以滚动，而不会缩小

#flaps

div 或切断内容。我怎样才能实现这个目标？

任何帮助将不胜感激！

Answer 1

将

margin-bottom

添加到

#scrollContainer

尝试在 CSS 中将

margin-bottom:75px;

添加到

#scrollContainer

。 finalElement 负责任地可见。

这是jsFiddle。