使用CSS aspect-ratio时父容器忽略子元素宽度问题

问题核心是flex布局的默认规则和aspect-ratio的生效顺序冲突：子元素默认带有flex-shrink: 1，浏览器会先按flex的收缩规则计算子元素的初始宽度，等aspect-ratio生效调整出正确的正方形宽度时，父容器的总宽度已经基于初始宽度计算完成，没同步更新，导致新增元素时父容器宽度增量和子元素实际宽度不匹配。

直接给子元素添加flex: 0 0 auto就能解决：

.item {
  height: 100%;
  aspect-ratio: 1;
  flex: 0 0 auto; /* 关键：禁止flex压缩/扩展子元素，保留实际宽度 */
  background: red;
}

这行代码的作用是明确告诉flex布局：不要收缩该子元素，也不要自动扩展它，完全保留子元素通过aspect-ratio计算出的实际宽度。父容器会基于这个最终宽度重新计算自身总宽度，新增元素时的宽度增量就会和子元素实际宽度匹配。

如果父容器高度是固定值，也可以直接给子元素设置width: [父容器高度值]; aspect-ratio: 1，但这种方式不够灵活，没法适配父容器高度动态变化的场景。

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