防止固定比例元素在flex容器交叉轴拉伸时溢出

我需要将1:1比例的元素（如头像）放入一个可随父元素拉伸、具备固定比例的flex行容器中。问题在于当元素数量较少时，它们会在容器的垂直方向（flex交叉轴）发生溢出。我尝试过使用display: grid替代flex，但结果相同。期望实现无需指定像素尺寸，即可让元素在双轴动态适配的布局结构。

HTML代码 #

<html>
  <body>
    <div class="container">
      <div class="item">
        <div class="subitem">
          1
        </div>
      </div>
      <div class="item">
        <div class="subitem">
          2
        </div>
      </div>
    </div>
  </body>
</html>

CSS代码（原始） #

div.container {
  margin-top: 40px;
  /* display: grid; */
  display: flex;
  /* grid-template-columns: 1fr 1fr; */
  /* grid-template-rows: 1fr; */
  /* align-items: center; */
  width: 300px;
  height: 100px;
  padding: 10px;
  background-color: lightblue;
  align-items: center;
}

.item {
  flex: 1 1 0;
  display: flex;
  /* align-items: stretch; */
  border: 1px solid black;
  padding: 3px;
  /* object-fit: contain; */
}
.subitem {
  /* width: 100%; */
  flex: 1 1 0;
  aspect-ratio: 1;
  border: 1px dashed black;
  max-height: 100%;
  max-width: 100%;
}

核心问题是aspect-ratio: 1会让元素优先维持正方形比例，当容器垂直空间不足时，元素宽度会超出父容器的可用范围，导致交叉轴溢出。通过以下调整可实现双轴动态适配：

• 调整容器对齐方式：将.container的align-items从center改为stretch，让子项.item填满容器的垂直空间。
• 子项内部居中：给.item添加align-items: center和justify-content: center，确保正方形元素在子项内居中显示。
• 限制正方形元素尺寸：移除.subitem的flex: 1，改用min()函数约束宽高，同时保留aspect-ratio: 1维持正方形比例，确保元素不会超出父容器的可用空间。

修改后的CSS代码：

div.container {
  margin-top: 40px;
  display: flex;
  width: 300px;
  height: 100px;
  padding: 10px;
  background-color: lightblue;
  align-items: stretch; /* 让子项填满容器垂直空间 */
}

.item {
  flex: 1 1 0;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  border: 1px solid black;
  padding: 3px;
}

.subitem {
  aspect-ratio: 1;
  border: 1px dashed black;
  /* 用min函数确保宽高不超过父容器的可用空间 */
  width: min(100%, 100%);
  height: min(100%, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

如果要实现完全不指定像素尺寸的动态布局，只需移除.container的width和height属性，让它随父元素自动拉伸即可。

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