如何让Avatar div随邻侧Info动态高度保持正方形？有无纯CSS方案？

给定基础HTML结构：

<div class="flex">
  <div id="avatar" />
  <div id="info"/>
</div>

需求是当#info的高度随内容动态变化时，#avatar始终保持与#info高度一致的正方形（例如info高度160px时，avatar为160×160；info高度305px时，avatar对应305×305），以下是纯CSS解决方案：

原生CSS实现 #

调整HTML结构并添加样式：

<div class="flex-container">
  <div class="avatar-wrapper">
    <div id="avatar"></div>
  </div>
  <div id="info">
    <!-- 这里放置动态内容 -->
  </div>
</div>

.flex-container {
  display: flex;
  align-items: flex-start;
}

.avatar-wrapper {
  position: relative;
  padding-top: 100%; /* 基于宽度的100% padding，实现正方形比例 */
  flex-shrink: 0; /* 防止容器被flex布局压缩 */
}

#avatar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green; /* 可选：用于可视化效果 */
}

#info {
  background-color: red; /* 可选：用于可视化效果 */
  margin-left: 1rem;
}

Tailwind CSS实现 #

直接用Tailwind类实现：

<div class="flex items-start">
  <div class="relative flex-shrink-0 pt-[100%]">
    <div id="avatar" class="absolute inset-0 bg-green-500"></div>
  </div>
  <div id="info" class="ml-4 bg-red-500">
    <!-- 动态内容区域 -->
  </div>
</div>

核心原理 #

• 通过padding-top: 100%（或Tailwind的pt-[100%]）创建正方形容器：padding的百分比值基于元素自身宽度，结合flex布局中相邻元素#info的高度，让容器高度自动匹配#info的高度，同时宽度等于高度，形成正方形。
• 绝对定位的#avatar填满正方形容器，保证其宽高始终与#info高度一致。
• align-items: flex-start（或Tailwind的items-start）确保flex容器内子元素从顶部对齐，避免#info被不必要拉伸。

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