Html 如何使多个不同高度的项目收缩到内容和don'；他们的包装纸不会溢出来吗？

我有一个包含两个项目的flexbox容器-它们本身就是flex容器（方向列）

html，正文{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
#外包装{
位置：绝对位置；
顶部：0px；
左：0px；
右：0px；
底部：0px；
利润率：30像素；
}
.pane_容器{
显示器：flex；
最大高度：100%；
}
.pane_项目{
显示器：flex；
弯曲方向：立柱；
宽度：300px；
}
.pane_滚动条{
溢出：自动；
}
.pane_标题{
高度：40px；
flex：无；
}
.pane\u页脚{
高度：40px；
flex：无；
}
.滚动项目{
高度：30px；
利润率：10px；
}
#外包装{背景：灰色；}
.pane_项{边框：3px纯黑色；}
.pane_头{背景：红色；}
.pane_滚动{背景：黄色；}
.pane_页脚{背景：绿色；}
.scroll_项{背景：橙色；边框：1px纯绿色；}

标题1
内容1
内容2
内容3
内容4
内容5
页脚1
标题2
内容1
内容2
内容3
页脚2

Hi Nymor，您的CSS无效；您的.box大小调整类似乎嵌套在另一个选择器声明中。你能修好吗？此外，您还可以使用帖子中的代码创建一个可运行的代码段（就像在JSFIDLE上一样）-编辑时，单击所见即所得编辑器中“上载图像”图标右侧的图标。我已经删除了框大小错误-即使我认为不需要更正它。。。感谢您对代码片段内容的解释——尽管包装器的大小是动态的，我看不出有什么方法可以像小提琴那样演示这个问题——但无论如何，堆栈片段（通常称为堆栈片段）确实有一些局限性；运行预览后，单击预览左上角的“完整页面”链接，然后取消浏览器窗口的最大化，并将其调整得更小或更大，以调整片段的视口大小，可以查看响应/动态大小调整。