如何用纯CSS实现Canvas与右侧Div等高且保持正方形？

当然可以用纯CSS搞定这个需求！我给你一套完整的实现方案，亲测有效：

首先，我们基于你提供的HTML结构，只需要添加几行CSS就能实现左侧Canvas和右侧div等高，同时保持Canvas为正方形的效果：

HTML结构（和你提供的一致，稍微格式化了下） #

<div class="outer">
  <canvas class="left"></canvas>
  <div class="right">
    <p>First line</p>
    <p>Second line</p>
  </div>
</div>

CSS代码 #

.outer {
  display: flex;
  gap: 1.5rem; /* 可选：给两个元素之间添加间距，按需调整 */
}

.left {
  background-color: red; /* 方便看到Canvas区域，可替换成你需要的样式 */
  align-self: stretch; /* 核心：让Canvas高度自动匹配右侧div的高度 */
  aspect-ratio: 1/1; /* 核心：强制宽高比1:1，保持正方形 */
  flex-shrink: 0; /* 防止Canvas在空间不足时被压缩变形 */
  border: none; /* 去掉Canvas默认边框 */
}

.right {
  flex: 1; /* 让右侧div占据剩余可用空间，可选属性 */
}

原理说明 #

• Flex布局基础：.outer 使用flex实现横向排列，容器高度由内容最高的子元素（也就是右侧的.right）决定；
• 等高匹配：.left的align-self: stretch会让它自动拉伸到和容器高度一致，也就是和.right的高度完全相同；
• 正方形保障：aspect-ratio: 1/1是CSS3的实用属性，直接强制元素宽高相等，这样当高度由右侧内容动态决定后，宽度会自动同步，完美保持正方形；
• 防止变形：flex-shrink: 0避免Canvas在容器空间不足时被压缩，确保正方形比例不被破坏。

你可以试试给.right里添加更多内容，比如多几行<p>标签，会发现Canvas的高度会跟着自动增加，宽度也同步变大，始终保持正方形且和右侧div等高。

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