Max-height百分比不生效，body类overflow:auto失效，需仅body区域滚动

我来帮你搞定这个问题！你遇到的两个小问题其实是关联的，咱们一步步拆解解决：

1. 为什么max-height百分比不生效？ #

CSS里的百分比高度（包括max-height）是相对于父元素的计算高度来计算的，如果vp-segment的父容器没有设置明确的height值，浏览器根本不知道这个百分比是参照谁来算的，自然就不起作用啦。

解决办法很简单：给vp-segment的父元素设置一个具体高度（比如固定像素height: 400px，或者用视口单位height: 80vh占视口80%高度），或者直接给.vp-segment设置基于视口的高度，替代百分比。

2. 怎么实现头部固定、内容滚动？ #

你现在的写法没生效，是因为没有给容器设置合适的布局规则。咱们用Flex布局就能轻松实现这个效果：

• 给.vp-segment启用Flex布局，设置垂直排列子元素
• 让头部（.head）保持自身内容高度，固定在顶部
• 让内容区（.body）占据容器剩余的所有空间，超出部分自动滚动

修改后的完整代码示例 #

CSS部分

/* 先给vp-segment的父容器设置明确高度（按需调整） */
.parent-container {
  height: 80vh; 
}

.vp-segment {
  background-color: white;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  padding: 5px;
  margin: 4px 2px;
  max-height: 100%;
  display: flex; /* 关键：启用Flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
}

.head {
  /* 不需要额外设置，默认占自身内容高度，固定在顶部 */
}

.body {
  background-color: #f3f3f3;
  padding: 12px 7px;
  flex: 1; /* 关键：占据容器剩余的所有空间 */
  overflow: auto; /* 内容超出时显示滚动条 */
}

HTML部分

<div class="parent-container">
  <div class="vp-segment">
    <div class="head">
      <div class="name">
        <div>Segment</div>
        <!-- 头部其他内容 -->
      </div>
    </div>
    <div class="body">
      <!-- 这里放需要滚动的长内容 -->
    </div>
  </div>
</div>

额外小提示 #

如果不想给父容器设置高度，也可以直接给.vp-segment设置height: 80vh，这样它的max-height:100%就有了参照对象，.body的flex:1也能正常工作。另外要注意类名的一致性，CSS里的.body要和HTML中的类名对应上哦～

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