如何在flex-direction为column时让flex容器内元素保持1:1宽高比？

问题现象 #

在flex容器中放置若干元素，宽屏时横向排列正常，每个元素内的SVG保持1:1宽高比；但窄屏切换为纵向排列后，设置了aspect-ratio:1的元素会突破flex容器的高度限制，且不想通过硬编码.col-test的高度（如33%）来适配任意数量的元素。

原因解释 #

1. 宽屏（row方向）：flex容器固定高度30vh，.col-test通过flex:1分配宽度，.wrapper的max-height:100%受容器高度限制，aspect-ratio:1基于宽度计算高度，不会超出容器范围，表现正常。
2. 窄屏（column方向）：切换为纵向排列后，.col-test的宽度变为容器的100%，aspect-ratio:1会强制.wrapper的高度等于宽度，此时.wrapper的高度会超过.col-test的max-height:100%限制。再加上.wrapper使用了position:relative和transform居中，浏览器会优先满足宽高比规则，导致容器被撑开，突破了原有的30vh高度限制。

解决方案 #

优化思路 #

• 移除多余的.wrapper层，简化布局结构；
• 让SVG直接承担宽高比控制，同时用flex布局实现居中；
• 利用flex:1分配空间，结合aspect-ratio和max-height/max-width确保元素在不同布局下都保持1:1比例，无需硬编码高度。

修改后的代码 #

<style>
.container-test{
    display:flex;
    flex-direction: row;
    height:30vh; /* 保留固定高度需求，可根据需要移除 */
}

.col-test{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    max-height:100%;
    max-width:100%;
}

.graph{
    aspect-ratio:1;
    width:100%;
    max-height:100%;
}

@media (max-width: 576px) {
    .container-test{
        flex-direction: column;
        /* 若不需要固定高度，可改为height:auto让容器自适应 */
        /* height:auto; */
    }
}
</style>

<div class="container-test">
    <div class="col-test">
        <svg class="graph" style="background-color:yellow;"></svg>
    </div>
    <div class="col-test">
        <svg class="graph" style="background-color:blue;"></svg>
    </div>
    <div class="col-test">
        <svg class="graph" style="background-color:green;"></svg>
    </div>
</div>

方案说明 #

• 宽屏状态：.col-test通过flex:1均分容器宽度，SVG的width:100%占满父元素宽度，aspect-ratio:1自动计算出等宽的高度，max-height:100%确保高度不超过容器的30vh。
• 窄屏状态：flex容器改为纵向排列，.col-test通过flex:1均分容器高度，SVG的max-height:100%限制高度不超过父元素，aspect-ratio:1自动调整宽度等于高度，保持正方形比例。
• 适配任意元素数量：无需硬编码.col-test的高度，flex:1会自动分配空间，SVG始终保持1:1比例。

补充说明 #

如果需要容器保持固定30vh高度，同时窄屏时所有元素都能完整显示，可给.container-test添加overflow:auto，超出容器的部分会自动出现滚动条，确保每个SVG的1:1比例不受影响。

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