我有一个定义高度的父元素（例如 100vh）和display: flex; flex-direction: column，以及几个没有固定高度的嵌套子元素 - 它们的高度基于flex-grow: 1。如果我添加一个新的最内层元素，其高度大于其父元素，则其所有祖先元素的高度都会改变。我希望新元素溢出其父元素，而不是改变其高度。
这是 jsfiddle 链接：https://jsfiddle.net/1o8khw7z/1/
使其工作的唯一方法是添加overflow: auto到顶部父级和新元素之间的所有元素（检查 jsfiddle 中的 CSS 注释）。
请记住我不能使用
如果嵌套元素很多，这个解决方案似乎有点麻烦。有没有更好的方法来处理这个问题？