启用换行的Flex列含aspect-ratio元素时无法保留内容高度

这是Flexbox规范的有意设计，核心原因是flex-direction: column结合flex-wrap: wrap时，容器的主轴/交叉轴尺寸计算逻辑发生变化，与aspect-ratio、百分比padding的尺寸依赖规则产生冲突。

具体逻辑拆解 #

在flex-direction: column的容器中：

• flex-wrap: none（默认nowrap）：
  容器宽度（交叉轴）会被最宽的子项撑开，所有子项默认宽度为auto，会填充容器宽度。此时aspect-ratio:16/9的元素可基于容器宽度计算高度，伪元素的padding-bottom:56.25%也能基于父元素宽度正常计算，布局不会溢出。
• flex-wrap: wrap：
  容器高度（主轴）不再由子项总高度撑开，若未显式设置高度，会自动收缩到能容纳所有换行flex线的最小高度。而aspect-ratio和百分比padding的尺寸计算逻辑是基于元素宽度推导高度，当容器高度被限制时，元素为满足比例要求，会不断放大宽度来获取足够高度，最终导致溢出容器。

这是规范的设计逻辑：当Flex容器允许换行时，交叉轴（此处为水平方向）尺寸由外部上下文决定，主轴（垂直方向）尺寸会自适应调整以容纳换行内容。但如果未给容器或子项明确宽度约束，依赖宽度计算高度的元素就会出现尺寸异常。

可行的解决方案 #

• 给Flex容器添加width: 100%或max-width: 100%，强制限制子项宽度范围；
• 给子项（.col）设置width: 100%+flex-shrink: 0，确保子项宽度填充容器且不被压缩；
• 保持flex-wrap: none，这是你当前验证有效的方案。

测试代码 #

HTML

<button>
    flex-wrap: wrap;
</button>

<div class="row flex-wrap">
    <div class="col">
        <article>
            <figure>
                Figure 1
            </figure>
        </article>
    </div>
    <div class="col">
        <article>
            <figure class="pseudo-element">
                Figure 2 (Pseudo Element)
            </figure>
        </article>
    </div>
    <div class="col">
        <article>
            <figure>
                Figure 3
            </figure>
        </article>
    </div>
</div>

CSS

.row {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

figure {
    aspect-ratio: 16 / 9;
}

figure.pseudo-element {
    aspect-ratio: auto;
}

figure.pseudo-element::after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

/**
 * 美化样式
 */
:root { font-family: sans-serif; }
button { margin-bottom: 1em; }
.row { border: 2px dotted blue; padding: 1em; }
.col { border: 2px dotted red; padding: 1em; }
.col:not(:first-child) { border-top: 0; }
article { border: 2px dotted green; }
figure { position: relative; }

JS

/**
 * 测试按钮逻辑
 */
const BUTTON = document.querySelector("button");
const ROW    = document.querySelector(".row");

BUTTON.addEventListener("click", (e) => {
    e.preventDefault();
    
    if (ROW.classList.contains("flex-wrap")) {
        ROW.classList.remove("flex-wrap");
        BUTTON.innerHTML = "flex-wrap: none;";
    } else {
        ROW.classList.add("flex-wrap");
        BUTTON.innerHTML = "flex-wrap: wrap;";
    }

}, { passive: false });

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