html - Flexbox 在折叠其他部分后不允许滚动区域

Question

我正在使用 AngularJS(1.7.8) 和 Bootstrap 开发一个 HMI，其中有四个主要面板：导航栏、左上角小、左下角大和右下角大。期望是小的左上角可以折叠变得更小，并为大左下角留出更多空间。我可以使用 flexbox 轻松做到这一点。在左下面板内有一个区域，当左上面板可见时，该区域应该是可滚动的。当它被折叠时，可滚动区域应该有足够的空间来显示其内容。

最后一个期望是我所挣扎的。滚动区域没有应用overflow-y样式属性，它的高度是整个内容，即使它在其父级（左下角面板）之外。

到目前为止，我尝试使用 flexbox，将每个面板设置为 flexbox，设置高度和其他各种东西，但似乎没有任何效果。不幸的是，我无法控制内容，也无法修复其高度。由于它需要扩展，因此设置max-height属性不起作用。

这是小提琴的一个例子。

编辑 ：

1. 从@Pablo-Binar评论来看，flexbox 似乎不能很好地使用 % height 属性。不幸的是，我在文档中没有找到任何内容。

2. 同样来自@Pablo-Binar评论，一种解决方案是在px根节点中设置高度，为子节点提供 flex 属性，并为最后一个（可滚动的）设置百分比高度（height:100%）。

标签： htmlcssflexbox

Answer 1

使用此代码

height: 100%.

如果那是高使用率

height: calc(100% - 30px);

那应该做的工作。