Flex容器内aspect-ratio属性失效，如何实现固定正方形链接？

要解决这个问题，核心是让aspect-ratio能基于明确的尺寸计算，同时避免内容撑开破坏比例，以下是两种可行方案：

方案一：给flex子项设置基础尺寸+溢出控制 #

给链接添加flex-basis指定基础宽度，配合overflow:hidden限制内容溢出，确保宽高比严格生效：

.flex {
  display: flex;
  align-items: flex-start;
  gap: 1rem; /* 可选，增加链接间距 */
}

.link {
  border: 1px solid black;
  padding-block: 1rem;
  aspect-ratio: 1 / 1;
  display: block;
  text-align: center;
  flex-basis: 20%; /* 可根据需求设为固定值如100px */
  overflow: hidden; /* 内容过长时隐藏，避免撑开元素 */
}

方案二：用高度约束强制维持比例 #

如果不想设置flex-basis，可以通过min-height和max-height锁定元素高度，结合width: fit-content让宽度跟随高度适配：

.flex {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.link {
  border: 1px solid black;
  padding-block: 1rem;
  aspect-ratio: 1 / 1;
  display: block;
  text-align: center;
  width: fit-content;
  min-height: calc(100% + 2rem); /* 包含上下padding的总高度 */
  max-height: calc(100% + 2rem);
  overflow: hidden;
}

问题根源说明 #

你遇到的问题原因有两点：

1. flex子项默认宽度由内容决定，aspect-ratio:1/1会基于这个内容宽度计算高度，但padding-block会额外增加元素高度，导致宽高比失衡；
2. 当内容高度超过计算出的高度时，元素会被内容撑开——aspect-ratio的优先级低于元素的固有内容尺寸，只有当元素尺寸由容器或明确的宽高定义时，该属性才会严格维持比例。

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