如何用CSS让Flexbox同级元素中的正方形高度匹配文本框？

我想实现这样的布局：

需求是创建两个相邻盒子：

• 一个包含多行动态文本
• 另一个必须是正方形，其边长由同级文本框的高度决定

问题在于无法根据父元素/同级元素的隐式高度设置正方形的尺寸。我尝试将两个<div>（正方形+文本）放入flex容器，并给正方形<div>设置aspect-ratio: 1，但即使父元素align-items设为stretch，计算比例时仍未考虑高度。

原代码示例 #

CSS

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui;
  margin-left: 2rem;
}

.wrapper {
  display: flex;
  border: 1px solid black;
  width: fit-content;
}

.square {
  width: 100px;
  aspect-ratio: 1;
  background-color: #ffec99;
  border: 1px solid black;
}

.text {
  padding: 0 1rem;
}

.text :last-child {
  margin-bottom: 2rem;
}

HTML

<div class="wrapper">
  <div class="square"></div>
  <div class="text">
    <h1>Some text of different sizes</h1>
    <p>Some other text that may be present</p>
  </div>
</div>

解决方法 #

核心是去掉正方形的固定宽度，让flex的拉伸特性决定其高度，再通过aspect-ratio: 1让宽度等于高度：

修改后的.square CSS：

.square {
  aspect-ratio: 1;
  background-color: #ffec99;
  border: 1px solid black;
}

原理：

• flex容器默认align-items: stretch，会让正方形的高度自动匹配文本框的高度
• aspect-ratio: 1强制正方形的宽度等于自身高度，从而实现尺寸由文本框高度驱动的正方形

当文本内容增加导致文本框高度变化时，正方形的边长会同步调整，完全符合需求。

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