CSS布局问题：无固定高度容器下维持aspect-ratio

需求说明 #

• .container 不设置固定height，其高度完全由.source__height元素的动态高度决定
• .dependent__height 元素保留aspect-ratio: 16/9属性，自适应容器高度
• 避免JavaScript方案（如MutationObserver），降低维护成本

当前问题代码 #

移除.container的固定height后，布局失效：

.container {
  display: flex;
  /* height: 500px; */
  /* 本不应依赖此属性实现功能 */
}

.dependent__height {
  aspect-ratio: 16 / 9;
  background-color: yellow;
}

.source__height {
  width: 10px;
  height: 500px;
  /* 高度可任意变化 */
  background-color: tomato;
}

<div class="container">
  <div class="dependent__height"></div>
  <div class="source__height"></div>
</div>

可行CSS解决方案 #

通过让.dependent__height继承容器高度（由.source__height动态决定），再利用aspect-ratio基于高度计算宽度，实现需求：

Flexbox方案 #

.container {
  display: flex;
  align-items: stretch; /* 默认值，明确声明确保效果 */
}

.dependent__height {
  aspect-ratio: 16 / 9;
  background-color: yellow;
  height: 100%; /* 关键：继承容器高度 */
}

.source__height {
  width: 10px;
  height: 500px; /* 高度可动态变化 */
  background-color: tomato;
}

Grid方案（可选） #

若倾向Grid布局，也可实现相同效果：

.container {
  display: grid;
  grid-auto-flow: column; /* 横向排列元素 */
}

.dependent__height {
  aspect-ratio: 16 / 9;
  background-color: yellow;
}

.source__height {
  width: 10px;
  height: 500px; /* 高度可动态变化 */
  background-color: tomato;
}

原理说明 #

• Flex/Grid容器的高度会自动由.source__height的动态高度撑开，无需设置固定值
• .dependent__height通过height: 100%（Flex方案）或Grid的默认拉伸特性，与.source__height保持同高
• aspect-ratio:16/9基于当前高度自动计算元素宽度，完美适配动态高度场景

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