我的布局非常简单:

+---------------+
|    Header     |
+---------------+
|       |       |
|       |       |
| Item1 | Item2 |
|       |       |
|       |       |
+---------------+

应该是页面高度的100%，项目2应该是垂直滚动的（项目1有固定的大小，不影响高度）。

我正在尝试使用FlexBox。根容器是flex列，其中包含头和子flex容器。子容器保存Item1和Item2，并且必须强制项增长到页面底部。

问题是，当向Item2添加内容时，它的父容器的高度开始增加，并超过根容器的高度！所以滚动条出现在页面上，但我只需要Item2应该是可滚动的。

是否有任何方法可以防止这种情况，只使用flex特性，而不涉及？如果不可能，在这种情况下，什么是正确的高度设置？

顺晟科技：

要用FlexBox解决这个问题，需要将要滚动并添加到包装容器中的框包装起来。若要修复一些额外的空间，请使用以下方法。当在可滚动元素上使用时，就会发生这种情况。

这里有一种使用CSS网格布局和FlexBox的可能性。标题的高度被设置为，但它可以是任意值或相对单位。