如何让Flex子项保持正方形比例且与父元素等高？

可以通过在正方形子项内部嵌套容器结合Flex布局特性实现，或者改用Grid布局更简洁。

方法一：Flex布局嵌套容器 #

核心思路：让父Flex容器保持默认的align-items: stretch，使两个子项高度一致；在正方形子项内部嵌套容器，利用height: 100%和aspect-ratio: 1确保正方形比例，同时外层子项设置flex-shrink: 0防止被压缩。

修改后代码示例 #

CSS

.container {
  padding: 8px;
  width: 400px;
  background-color: lightgray;
}

.parent {
  display: flex;
}

.child1 {
  border: 1px solid black;
  padding: 8px;
  flex-shrink: 0; /* 避免被压缩 */
  display: flex;
  align-items: center;
  justify-content: center; /* 可选，让图标居中 */
}

.child1-square {
  height: 100%; /* 继承child1的高度，该高度与child2一致 */
  aspect-ratio: 1; /* 强制宽高1:1 */
}

.child2 {
  flex: 1;
  border: 1px solid black;
  padding: 8px;
}

.icon {
  width: 12px;
  height: 12px;
  background-color: blue;
}

HTML

<div class="container">
  <div class="parent">
    <div class="child1">
      <div class="child1-square">
        <div class="icon"></div>
      </div>
    </div>
    <div class="child2">
      X<br>
      多行内容<br>
      测试高度同步
    </div>
  </div>
</div>

方法二：改用Grid布局 #

Grid布局的列定义更适配“自适应宽高比列 + 剩余宽度列”的场景，无需嵌套容器即可实现需求：

修改后代码示例 #

CSS

.container {
  padding: 8px;
  width: 400px;
  background-color: lightgray;
}

.parent {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列自适应正方形宽度，第二列占满剩余 */
}

.child1 {
  border: 1px solid black;
  padding: 8px;
  aspect-ratio: 1;
  height: 100%; /* 强制高度与行高一致（即child2的高度） */
  display: flex;
  align-items: center;
  justify-content: center;
}

.child2 {
  border: 1px solid black;
  padding: 8px;
}

.icon {
  width: 12px;
  height: 12px;
  background-color: blue;
}

HTML

<div class="container">
  <div class="parent">
    <div class="child1">
      <div class="icon"></div>
    </div>
    <div class="child2">
      X<br>
      多行内容<br>
      测试高度同步
    </div>
  </div>
</div>

原理说明 #

• 原问题中直接给flex子项设置aspect-ratio:1时，align-items: stretch会强制子项高度填满容器，破坏宽高比；而align-items: start则导致子项高度不统一。
• 方法一中的嵌套容器通过继承外层子项的同步高度，再用aspect-ratio:1约束自身宽高比，既保证正方形形态，又维持高度一致。
• Grid布局中grid-template-columns: auto 1fr让第一列根据子项宽高比自动调整宽度，height:100%确保child1高度与行内child2一致。

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