防止弹性元件从容器中伸出

Question

这里是JSFIDDLE。

• 粉红色是柔韧性容器的尺寸。
• flex元素class="fxel fxel2"因其非常“高”而从容器中伸出。

我见过的所有解决方案都对元素的单个高度（在px或%中进行了某种“假设”。

限制

• class="fxel fxel1"的高度在运行时会有所不同。因此无法对高度做出任何假设。

所需解决方案：

• class="fxel fxel2"应该占据粉红色中剩余的所有剩余高度。
• 当内容要“高大”时，应在overflow: scroll内部<div class="fxel fxel2">内开始（这意味着div元素具有滚动条，我们不“溢出” window / body / html）

有什么建议吗？

这是我以动态方式瞄准的静态废话占位符：

JSFIDDLE_SOLUTION_LOOKALIKE