Html 弹性项目赢得'；t垂直扩展以容纳内容

我的站点的各个部分是垂直堆叠的，每个部分中的内容都以flexbox垂直和水平居中

每个部分至少应该填满整个屏幕，但如果内容不合适，则垂直增长。以下内容适用于除IE11之外的所有主要浏览器（如果您愿意的话，请选择a）

html，
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
}
身体{
/*对以下内容进行注释，以查看期望的结果*/
/*显示器：flex；
弯曲方向：立柱*/
}
部分{
/*相关材料*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
最小高度：100%；
/*不重要的美学素材*/
边框：1px纯白；
背景：#442；
颜色：白色；
字体系列：Calibri；
字体大小：35px；
填充：0px 100px；
}
/*更不重要的美学东西*/
截面：第n种类型（2n）{
背景:#553；
}

我是一个部门。向下滚动。
我是另一个部门。继续滚动。
下一节将展开以容纳其内容。



















。




















。




















。


.


要是这么容易就好了。
>P>而不是使用通常依赖于父元素的指定高度的标准百分比，并在浏览器中呈现不同的内容，考虑使用仅依赖于视口维度的视口百分比单位。

这应该是你所需要的。在铬、FF和IE11中测试


正文{
保证金：0；
显示器：flex；
弯曲方向：立柱；
}
部分{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
最小高度：100vh；/*新*/
/*不重要的美学素材*/
边框：1px纯白；
背景：#442；
颜色：白色；
字体系列：Calibri；
字体大小：35px；
填充：0px 100px；
}
/*更不重要的美学东西*/
截面：第n种类型（2n）{
背景:#553；
}

我是一个部门。向下滚动。
我是另一个部门。继续滚动。
下一节将展开
以容纳其内容。



















。




















。




















。


.


要是这么容易就好了。
检查此项，这是否就是您要寻找的？您应该添加一个显示预期（和实际）行为的图形。为什么是真实的？因为你看到的可能是由一个将来无法复制的bug引起的，所以你的问题在那时是没有用的。这个解决方案非常有效！非常感谢。我错误地认为视口单元的支持能力很差。现在来看，vh/vw在世界各地都得到了很好的支持。