Angular Material侧边栏中间div自适应与滚动问题求助

嘿，这个问题我之前在做Angular Material侧边栏的时候也踩过坑！用固定百分比高度确实会在窗口高度缩小到一定程度时，出现底部的info-div被截断的情况——因为当父容器高度不足时，三个div的百分比高度总和可能超过100%，浏览器就会优先截断后面的元素。咱们换用Flexbox布局就能完美解决这个自适应需求，这也是Angular Material官方推荐的布局方式哦。

具体解决方案步骤： #

1. 给侧边栏父容器设置垂直Flex布局
   首先确保你的侧边栏父容器有明确的高度（比如占满视口高度100vh，或者继承父元素的100%高度），并设置垂直方向的Flex布局：

.sidebar-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 根据实际布局调整，嵌套容器可改用height: 100% */
}

2. 分别配置三个子div的Flex属性

• title-div：设置为不可压缩，保持自身最小高度：

.title-div {
  min-height: 10%;
  flex-shrink: 0; /* 强制不被压缩，始终保留最小高度 */
}

• items-div：让它自动填充title和info之外的所有可用空间，同时开启滚动：

.items-div {
  flex: 1 1 auto; /* flex-grow:1 占据剩余空间; flex-shrink:1 允许被压缩; flex-basis:auto 基于内容自动调整 */
  overflow: auto; /* 内容超出时显示滚动条 */
  /* 去掉之前固定的height和max-height，让Flexbox控制高度 */
}

• info-div：同样设置为不可压缩，确保始终固定在底部：

.info-div {
  min-height: 10%;
  flex-shrink: 0; /* 强制不被压缩，避免被截断 */
}

为什么这样有效？ #

Flexbox的核心是让容器内的元素根据可用空间自动分配大小：

• flex-shrink:0的元素（title和info）会始终保持自己的最小高度，不会被压缩；
• flex:1的items-div会自动占据title和info之外的所有剩余空间，当窗口高度缩小时，它会自动收缩，超出内容的部分通过overflow:auto实现滚动，完全不会影响底部的info-div。

额外：用Angular Material Flex布局指令简化实现 #

如果你用了Angular Material的@angular/flex-layout库，还可以直接用指令实现，不用写自定义CSS，更符合Angular生态：

<div class="sidebar-container" fxLayout="column" fxLayoutAlign="start stretch">
  <div class="title-div" fxFlex="0 0 auto">
    <!-- 侧边栏标题内容 -->
  </div>
  <div class="items-div" fxFlex="1 1 auto" fxLayout="column" fxLayoutAlign="start stretch">
    <!-- 可展开的导航项内容 -->
  </div>
  <div class="info-div" fxFlex="0 0 auto">
    <!-- 底部信息内容 -->
  </div>
</div>

这样调整后，不管窗口怎么缩放，info-div都会稳稳留在底部，items-div会自动适配中间空间并在内容超出时滚动，完美解决你的自适应问题！

内容的提问来源于stack exchange，提问作者Dean Strydom