内层div设置max-height不生效的问题排查与解决

这个问题我之前也遇到过！核心原因是CSS里百分比高度的计算规则——子元素的百分比高度（包括max-height）必须依赖父元素有明确的高度定义，不能是默认的auto。如果父元素高度是由内容撑开的，浏览器根本没法算出90%对应的具体像素值，自然不会生效。下面给你两种靠谱的解决方案：

方案1：给父容器设置明确的视口高度 #

这种方式适合需要固定弹窗大小的场景，用视口单位（vh）给父容器定高，让内层的百分比高度有计算依据：

#shadow {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: darkgray;
  z-index: 2;
  /* 用flex实现父容器居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

#itemSoldOutView {
  width: 80%; /* 自定义弹窗宽度 */
  height: 90vh; /* 明确的高度，基于视口高度的90% */
  background: white;
  padding: 20px;
  box-sizing: border-box; /* 避免padding撑大容器 */
}

#itemSoldOutViewContent {
  max-height: 90%; /* 现在基于父容器的90vh计算，即81vh */
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
  padding: 10px;
}

方案2：用flex布局让父容器自适应空间 #

如果不想固定弹窗高度，想让它根据内容和屏幕空间自适应，可以用flex布局让父容器占据可用空间：

#shadow {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: darkgray;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px; /* 避免弹窗贴屏幕边缘 */
  box-sizing: border-box;
}

#itemSoldOutView {
  width: 80%;
  max-height: 100%; /* 限制弹窗最大高度不超过屏幕 */
  background: white;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; /* 让子元素垂直排列 */
}

#itemSoldOutViewContent {
  flex: 1; /* 占据父容器剩余的所有空间 */
  overflow-y: auto; /* 内容超出时自动滚动 */
}

关键注意点 #

• 一定要给内层div加overflow-y: auto，否则内容超出时会直接溢出父容器，看不到滚动效果。
• 如果父容器有padding，记得加box-sizing: border-box，避免padding额外撑大容器高度，导致计算偏差。

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