基于16/9固定比例视频设置父元素.max-height的纯CSS方案

核心方案 #

利用CSS的aspect-ratio属性固定视频的16:9比例，结合Flexbox的拉伸特性和溢出滚动，实现绿色.flex容器高度与视频一致，两侧列表内容过多时自动显示滚动条。

实现代码 #

/* 视频容器：固定16:9比例 */
.video-container {
  aspect-ratio: 16/9;
  width: 60%; /* 可根据需求调整视频宽度占比 */
  background-color: #000; /* 模拟视频区域 */
}

/* 绿色Flex容器：高度由视频撑开，限制最大高度与视频一致 */
.flex {
  display: flex;
  gap: 12px; /* 子元素间距，可调整 */
  max-height: fit-content;
  background-color: green;
}

/* 两侧列表容器：拉伸至视频高度，内容溢出时滚动 */
.sidebar {
  flex: 1; /* 均分剩余宽度 */
  overflow-y: auto;
}

/* 固定高度的列表项 */
.sidebar-item {
  height: 50px;
  margin: 6px 0;
  background-color: #ddd;
}

原理说明 #

1. 视频比例控制：aspect-ratio: 16/9让视频容器自动保持16:9的宽高比，高度会随容器宽度自适应计算，无需手动设置固定高度。
2. Flex容器高度适配：max-height: fit-content使绿色.flex容器的高度完全由内部最高的子元素（视频容器）决定，确保容器最大高度与视频高度一致。
3. 列表等高与滚动：Flex布局默认align-items: stretch，让两侧.sidebar自动拉伸至与视频容器相同的高度；overflow-y: auto则在列表内容超出容器高度时显示垂直滚动条，不影响整体布局。

兼容性替代（针对不支持aspect-ratio的旧浏览器） #

如果需要兼容老版本浏览器，可使用padding-top的经典方案实现16:9比例：

.video-container {
  position: relative;
  width: 60%;
  padding-top: 56.25%; /* 9/16 = 0.5625，即56.25% */
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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