iOS/WebKit下aspect-ratio导致父容器无法自适应内容的问题排查

给容器的子元素设置CSS aspect-ratio 属性后，子元素尺寸显示正常，但父容器无法自适应内容大小，该问题仅出现在WebKit内核浏览器（如iOS端浏览器），Chrome表现符合预期。

效果对比 #

• Chrome效果：
• WebKit效果：

可见Chrome中蓝色父容器能适配紫色子元素，但WebKit中父容器无法适配，推测由子元素使用aspect-ratio导致。

示例代码 #

CSS #

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
}

.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    background: lightskyblue;
    padding: 20px;
}

.child {
    display: flex;
    justify-content: center;
    align-content: center;
    position: relative;
    
    height: 50%;
    aspect-ratio: 1/1;
    
    background: purple;
    border: 2px solid;
    border-radius: 2px;
}

.other {
    background: orangered;
    flex-grow: 1;
}

HTML #

<div class="wrapper">
    <div class="container">
        <div class="child"></div>
        <div class="child"></div>
    </div>

    <div class="other">
    </div>
</div>

这是WebKit内核的已知布局计算bug：当垂直方向的flex容器（.container）的子元素仅设置height并配合aspect-ratio时，WebKit无法正确推导子元素的宽度值，导致父flex容器无法基于子元素的实际宽度自适应自身尺寸。Chrome的Blink内核已修复该逻辑，能正确计算子元素宽度并让父容器适配。

有两种可靠的修复方式：

方式一：给子元素明确宽度计算规则 #

给.child添加width: fit-content，让WebKit能准确计算子元素的宽度：

.child {
    /* 保留原有样式 */
    width: fit-content;
}

方式二：给父容器添加最小宽度约束 #

给.container设置min-width: min-content，强制父容器根据子元素的最小内容宽度适配：

.container {
    /* 保留原有样式 */
    min-width: min-content;
}

两种方案都能让WebKit内核浏览器的渲染效果和Chrome保持一致。

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