如何实现maxFlex效果？基于Flex布局的自适应布局需求

解决方案代码 #

<!-- 外层容器 -->
<div style="height: 1000px; display: flex; flex-direction: column;">
    <!-- 顶部视图 -->
    <div style="flex: 1; min-height: 0;">
        <!-- 子元素A内容 -->
    </div>

    <!-- 底部视图容器 -->
    <div style="flex: 0 1 50%;">
        <!-- 子元素B内容 -->
        <div>
            <!-- Some child B -->
        </div>
    </div>
</div>

核心属性解释 #

• 外层容器：设置flex-direction: column让子元素垂直排列，固定高度1000px，确保布局在指定空间内生效。
• 顶部视图：flex: 1让它自动占据容器内除底部元素外的所有可用空间；min-height: 0是必要的兼容设置，避免因内部内容溢出导致顶部元素无法正常收缩/扩展。
• 底部视图容器：flex: 0 1 50%是实现需求的关键：
  • flex-grow: 0：禁止底部容器抢占额外空间，保证顶部元素优先占满剩余区域。
  • flex-shrink: 1：当内部子元素B高度小于容器一半（500px）时，底部容器会自动收缩到子元素的实际高度。
  • flex-basis: 50%：设置底部容器的基准高度为容器的一半，当子元素B高度超过500px时，底部容器会保持500px高度，不会继续扩展。

补充优化（可选） #

如果子元素B内容超过500px需要滚动显示，只需给底部视图容器添加overflow: auto属性，内容会在容器内滚动而不会突破高度限制。

内容的提问来源于stack exchange，提问作者N Meibergen