如何实现百分比高度可滚动div，不压缩兄弟元素也不超出父容器

核心思路：用Flexbox实现高度自适应分配 #

通过Flexbox布局可以精准控制容器内元素的高度分配，彻底解决兄弟元素被压缩、内容截断的问题，具体修改如下：

1. 修改#content的样式，启用垂直方向的Flex布局：

#content {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* 保留原有padding、边框等样式 */
}

2. 给#flaps设置禁止压缩规则，确保它保持自身固有高度：

#flaps {
  flex-shrink: 0;
  /* 保留原有背景、padding等样式 */
}

3. 让#scrollContainer自动填充剩余空间并开启垂直滚动：

#scrollContainer {
  flex: 1;
  overflow-y: auto;
  /* 保留原有背景等样式 */
}

原理说明 #

• display: flex + flex-direction: column让#content的子元素垂直排列，高度由Flex规则自动分配。
• flex-shrink: 0限制#flaps不会被压缩，确保它始终完整显示自身内容。
• flex: 1让#scrollContainer自动占据#content中除#flaps外的所有剩余空间，当内容超出容器高度时，overflow-y: auto会自动生成滚动条，既不会截断内容，也不会影响兄弟元素的布局。

内容的提问来源于stack exchange，提问作者Sebastian Loucim