实现等高不等宽单行两栏布局（右侧为正方形）

Grid 实现方案 #

核心是让左侧列自适应内容宽度，右侧通过正方形比例约束，自动匹配左侧高度生成等宽的正方形：

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 1rem; /* 可自定义两栏间距 */
}

.left-content {
  background: #f0f0f0;
  padding: 2rem; /* 示例内边距，可根据需求调整 */
}

.right-square {
  aspect-ratio: 1/1; /* 强制宽高相等 */
  height: 100%; /* 高度同步左侧内容高度 */
  background: #ccc;
  /* 可选：让内部内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

• grid-template-columns: auto 1fr 让左侧根据内容自动调整宽度，右侧默认占剩余空间，但aspect-ratio会强制它保持正方形，最终宽度等于左侧内容的高度。
• 左侧内容可以自由添加元素、调整尺寸，右侧会自动同步高度并维持正方形。

Flexbox 实现方案 #

利用Flex的拉伸特性让右侧高度匹配左侧，再通过正方形比例锁定宽高：

.container {
  display: flex;
  align-items: stretch; /* 强制子元素高度一致 */
  gap: 1rem; /* 可自定义两栏间距 */
}

.left-content {
  flex-grow: 1; /* 左侧占满容器剩余空间 */
  background: #f0f0f0;
  padding: 2rem; /* 示例内边距，可根据需求调整 */
}

.right-square {
  aspect-ratio: 1/1; /* 强制宽高相等 */
  height: 100%; /* 高度同步左侧内容高度 */
  flex-shrink: 0; /* 防止右侧被压缩至0宽度 */
  background: #ccc;
  /* 可选：让内部内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

• align-items: stretch 确保右侧元素高度和左侧完全一致，aspect-ratio:1/1直接将宽度锁定为等于高度，实现正方形。
• flex-shrink:0 解决了你之前遇到的右侧宽度为0的问题，避免Flex布局压缩非弹性元素。

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