固定定位div设置max-height后内容无法滚动？技术求助

问题核心在于.content的height:100%无法正确计算——因为.container只有max-height而没有明确的高度约束，百分比高度需要父元素有确定的高度才会生效。同时要保证切换按钮不随内容滚动，我们可以通过Flex布局来合理分配容器内的空间：

修改后的代码 #

CSS 部分 #

.container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 50%;
  background-color: blue;
  /* 垂直方向flex布局，让内部元素按垂直方向排列 */
  display: flex;
  flex-direction: column;
}

.toggle {
  /* 给切换按钮固定的内边距，避免被内容挤压 */
  padding: 8px;
  cursor: pointer;
  background-color: darkblue;
  color: white;
}

.content {
  /* 让内容区域自动填充容器剩余空间 */
  flex: 1;
  overflow: auto;
  /* 可选：添加内边距优化视觉效果 */
  padding: 0 8px;
}

JS 部分（逻辑优化） #

const content = document.querySelector(".content");
const toggle = document.querySelector(".toggle");

toggle.addEventListener("click", () => {
  const isHidden = content.style.display === "none";
  content.style.display = isHidden ? "block" : "none";
  toggle.innerHTML = isHidden ? "▼" : "▲";
});

HTML 部分（无需修改） #

<div class="other">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ante in facilisis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia massa quis sapien faucibus convallis. Suspendisse dignissim sem at nunc molestie egestas non quis nisi. Cras in auctor eros, ac ultricies nisi. Etiam finibus ut turpis at porta. Praesent mattis, sapien et rhoncus facilisis, sem mauris euismod risus, at bibendum lacus erat ut arcu. Nullam tellus risus, tristique quis nisl ut, malesuada ultricies lectus. Duis consequat ligula ut mi efficitur molestie. Ut malesuada, quam at luctus rutrum, augue ante efficitur urna, ac consequat velit metus sed velit. Morbi id dolor lacus. Maecenas quis quam ex. Nulla hendrerit aliquam massa a molestie.
</div>
<div class="container">
  <div class="toggle">▼</div>
  <div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pulvinar ante in facilisis faucibus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed lacinia massa quis sapien faucibus convallis. Suspendisse dignissim sem at nunc molestie egestas non quis nisi. Cras in auctor eros, ac ultricies nisi. Etiam finibus ut turpis at porta. Praesent mattis, sapien et rhoncus facilisis, sem mauris euismod risus, at bibendum lacus erat ut arcu. Nullam tellus risus, tristique quis nisl ut, malesuada ultricies lectus. Duis consequat ligula ut mi efficitur molestie. Ut malesuada, quam at luctus rutrum, augue ante efficitur urna, ac consequat velit metus sed velit. Morbi id dolor lacus. Maecenas quis quam ex. Nulla hendrerit aliquam massa a molestie.
  </div>
</div>

关键修改说明 #

1. 给.container添加Flex布局，垂直排列内部元素，为子元素提供明确的高度约束
2. 给.toggle设置固定内边距，确保它始终留在容器顶部，不随内容滚动
3. 给.content设置flex:1，让它自动填充容器剩余空间，此时overflow:auto会正确触发滚动条
4. 优化JS逻辑，简化显示状态的判断与切换

修改后，当屏幕宽度缩小导致内容溢出时，.content会显示滚动条，切换按钮固定在容器顶部；同时.container的max-height:50%依然生效，容器高度不会超过屏幕的一半，完全符合需求。

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