Flex容器拉伸项目时aspect-ratio属性失效问题求助

要让Flex容器内的项目在高度被flex拉伸的同时保持1:1宽高比，核心是让项目的宽度基于拉伸后的高度自动计算，避免内容或默认flex布局干扰宽度。以下是两种可行方案：

方案一：强制宽高比基于拉伸高度计算 #

给目标项目设置width: 0和flex-shrink: 0，消除内容对宽度的影响，让宽度完全由拉伸后的高度和aspect-ratio决定：

<div style="display: flex;">
  <div style="aspect-ratio: 1; background: blue; width: 0; flex-shrink: 0;">1:1</div>
  <h1>Blue box should have 1:1 aspect-ratio</h1>
</div>

• width: 0：强制宽度放弃内容撑开的逻辑，改为由aspect-ratio根据高度计算
• flex-shrink: 0：防止项目在容器空间不足时被压缩，保证宽高比稳定

方案二：嵌套容器隔离布局逻辑 #

把目标项目放在嵌套容器中，让外层容器被flex拉伸至和其他项目同高，内层项目通过aspect-ratio保持正方形：

<div style="display: flex;">
  <div style="background: blue; display: flex; align-items: center; justify-content: center;">
    <div style="aspect-ratio: 1;">1:1</div>
  </div>
  <h1>Blue box should have 1:1 aspect-ratio</h1>
</div>

• 外层嵌套容器会被flex自动拉伸至和h1相同高度
• 内层项目依靠aspect-ratio:1维持正方形，flex居中属性让内容在正方形内对齐

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