如何让Flex行首个元素为完美正方形，且行高由其他列内容决定？

需求描述 #

现有一个Flex布局的行容器，需要实现两个效果：

• 第一个子元素为完美正方形
• 整个Flex行的高度由第二个子元素的动态内容决定

初始代码结构 #

<div class="container">
  <div class="first" data-this-should-be-a-square></div>

  <div data-this-element-should-determine-height-of-row>
    <p>dynamic content 1</p>
    <p>dynamic content 2</p>
  </div>
</div>

存在问题的现有实现 #

以下CSS能实现正方形，但给容器设置了固定高度，不符合需求：

.container {
  display: flex;
  height: 50px; /* 不希望设置的固定高度 */
}

.first {
  background-color: black;
  aspect-ratio: 1 / 1;
}

此前尝试给.first设置height: 0和min-height: 100%，但仅在容器指定高度时生效。

可行解决方案 #

无需给Flex容器设置固定高度，利用Flex的默认对齐特性结合aspect-ratio即可实现：

.container {
  display: flex;
  /* 无需设置固定height，容器高度自动由第二列内容撑开 */
  align-items: stretch; /* 默认值，可省略，作用是让子元素高度匹配容器高度 */
}

.first {
  background-color: black;
  aspect-ratio: 1 / 1; /* 强制宽高比1:1 */
  flex-shrink: 0; /* 防止元素被压缩，保证正方形比例不被破坏 */
}

原理说明 #

1. Flex容器默认高度由内部最高的子元素（即第二列的动态内容）决定
2. align-items: stretch让第一个子元素的高度自动匹配容器高度
3. aspect-ratio: 1/1会根据已确定的高度，自动计算出相等的宽度，形成完美正方形
4. flex-shrink: 0避免容器空间不足时，第一个元素被压缩导致比例失衡

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