屏幕高度变化时内容高度调整：子元素溢出父容器问题求解

你遇到的问题根源有两个：

1. 子组件高度参考对象错误：.lists-container用了height:50vh，这个单位是基于浏览器视口高度计算的，不是父容器.container的高度。当父容器因为max-height:700px或者视口变矮而缩小时，子组件还是硬撑着视口50%的高度，自然会溢出父容器。
2. 伪元素高度未适配父容器实际高度：.container::before用了height: inherit，它继承的是父容器的85vh属性值，当父容器触发max-height:700px时，伪元素的高度不会自动跟着父容器的实际高度调整，会导致阴影错位。

下面给出两种解决方案，优先推荐第一种：

方案1：用Flexbox实现自适应布局（最灵活） #

把父容器改成垂直方向的flex布局，让中间的列表区域自动填充剩余空间，同时限制最大高度，内容超出时显示滚动条：

/* Parent container */
.container {
  position: relative;
  height: 85vh;
  max-height: 700px;
  width: 500px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 10px;
  display: flex; /* 开启flex布局 */
  flex-direction: column; /* 子元素垂直排列 */
}

/* Custom shadow for parent container */
.container::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 8px;
  height: 100%; /* 改为100%，跟随父容器实际高度 */
  width: 100%; /* 改为100%，避免继承width的问题 */
  background-color: rgba(187, 187, 187, 0.125);
  border-radius: 5px;
  z-index: -1;
}

/* Header inside the container */
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 0; /* 调整padding，让头部高度更可控 */
  font-size: 24px;
  font-weight: bold;
  flex-shrink: 0; /* 固定头部高度，不会被压缩 */
}

/* Lists area */
.lists-container {
  margin: 0 50px; /* 只保留左右margin，上下空间由flex分配 */
  flex-grow: 1; /* 自动填充父容器的剩余空间 */
  max-height: 500px; /* 限制列表区域的最大高度 */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  background-color: red;
}

/* User input area */
.userInput-container {
  width: 100%;
  background-color: green;
  display: flex;
  justify-content: center;
  padding: 15px 0; /* 添加内边距，让输入区更美观 */
  flex-shrink: 0; /* 固定输入区高度，不会被压缩 */
}

方案2：用百分比+calc手动计算高度（适合简单场景） #

如果不想用flex，也可以手动计算子组件的高度，基于父容器的百分比：

/* Lists area */
.lists-container {
  margin: 50px;
  /* 父容器总高度 - 头部高度(约100px) - 输入区高度(约50px) */
  height: calc(100% - 150px);
  max-height: 500px;
  overflow-y: auto;
  background-color: red;
}

这种方式的缺点是需要硬编码头部和输入区的高度，后续如果修改这两个区域的样式，必须同步调整calc里的数值，灵活性不如flex。

为什么之前的max-height没生效？ #

你之前设置的max-height:500px不是没生效，而是触发条件不对：当视口高度小于1000px时，50vh的计算值小于500px，max-height不会起作用；当视口高度大于1000px时，父容器被max-height:700px限制，但子组件的50vh会超过父容器的剩余空间，此时max-height会生效，但依然可能溢出父容器——因为父容器的剩余空间可能不足500px。

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