水平flexbox中aspect-ratio属性失效的原因及解决方法

我实现了一个简单的flexbox布局，包含文本元素和右侧的背景图元素。要求右侧背景图元素自动与文本元素等高，同时保持1/1的aspect-ratio（预期是右侧显示和文本区等高的红色正方形），但实际运行时aspect-ratio属性被忽略了：#image元素的高度已按预期被拉伸到和flexbox一致（因为flexbox默认align-items: stretch），但宽度仍为0。奇怪的是，把flexbox设置为flex-direction: column时，这个属性又能正常工作。

原代码 #

CSS #

#wrapper {
  display: flex;
}

#image {
  background-image: linear-gradient(red, gray);
  border: 1px solid black;
  aspect-ratio: 1 / 1;
}

HTML #

<div id="wrapper">
  <div id="text">
    <h3>A headline</h3>
    And some text below it<br>
    Element to the right should be a square
  </div>
  <div id="image"></div>
</div>

问题原因 #

在水平flex布局（默认flex-direction: row）中，flex项目的主轴是水平方向，浏览器优先遵循主轴的尺寸规则计算元素大小。默认情况下，空的#image元素在主轴方向的flex-basis是auto，内在宽度为0。

aspect-ratio的生效逻辑是：如果元素某一方向的尺寸被确定，另一方向会按比例计算。但这里#image的高度是交叉轴（垂直方向）的尺寸，而flex布局在主轴（水平）方向上没有给它分配任何可用空间，浏览器不会主动用交叉轴的高度反推主轴宽度——因为主轴尺寸优先级更高，所以aspect-ratio没触发宽度计算。

换成垂直flex布局时，主轴变成垂直方向，元素的高度（主轴）被拉伸后，aspect-ratio会基于这个主轴高度计算宽度（交叉轴），所以能正常显示正方形。

修复方案 #

方案1：强制用高度计算宽度 #

给#image设置width: 0让浏览器强制基于高度计算宽度，同时flex-shrink: 0防止元素被压缩：

#wrapper {
  display: flex;
}

#image {
  background-image: linear-gradient(red, gray);
  border: 1px solid black;
  aspect-ratio: 1 / 1;
  width: 0;
  flex-shrink: 0;
}

方案2：让浏览器考虑比例约束 #

给#image设置min-width: min-content，强制浏览器考虑aspect-ratio的尺寸限制：

#image {
  background-image: linear-gradient(red, gray);
  border: 1px solid black;
  aspect-ratio: 1 / 1;
  min-width: min-content;
}

方案3：改用CSS Grid布局 #

如果场景允许，Grid布局能更直观实现这个效果，自动处理等高和比例：

#wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

#image {
  background-image: linear-gradient(red, gray);
  border: 1px solid black;
  aspect-ratio: 1 / 1;
}

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