【CSS】多容器多限制高度样式实现

项目背景

此问题源自一个低代码项目，对于配置的页面提供了普通容器、表单容器、行列容器三种布局相关的组件。三种布局组件特征不同，却又支持相互嵌套。因此，在处理容器高度问题上较为复杂，存在多种组合情况。

需求分析

• 普通容器组件
  • 高度情况最为复杂，可以设置为以下四种类型：
    • 具体数值（设置多高显示多高）
    • 百分比值（相较于父容器【页面组件或普通容器组件】高度的百分占比）
    • 适应内容高度（最小高度84px且随内容高度增加撑大）
    • 占满剩余高度（占满父容器【页面组件或普通容器组件】中剩余高度；若兄弟容器中存在多个“占满剩余高度”的普通容器，则均分父容器剩余高度且均分得到的最小高度为84px）
• 表单容器组件的高度为适应内容高度；
• 行列容器组件的高度为适应内容高度；

另外对于是否允许出现滚动条也有区别

• 对于自适应内容高度的容器组件本身不允许出现滚动条，要求其滚动效果作用于被其撑高的父元素上；
• 对于高度固定的容器（具体数值、百分比值），当内容高度超出其本身高度时允许出现滚动条；

拿到这个需求时，就已经头大了（真的是既要，又要，还要。。。）

需求梳理

通过分析，发现表单容器组件、行列容器组件的高度情况还比较简单。最多变的就是普通容器组件（名字带有普通二字，却最事多！࿰