Safari中Flexbox内固定高+aspect-ratio的div宽度为0问题

在Flex布局的.col容器中，嵌套了.helper、设为display: contents的figure和带aspect-ratio的图片容器.image，这套结构在Chrome、Firefox、Edge中能正常渲染，但Safari 18（桌面及移动端）里.image的计算宽度会变成0，导致图片无法显示。需要保留.col的Flex结构，同时保证图片左对齐而非居中。

修复方案1：让容器由内容撑开宽度 #

给.helper添加align-self: flex-start，避免它被Flex容器强制拉满宽度；同时调整.image的宽度规则，让它基于aspect-ratio和固定高度自动计算尺寸：

.helper {
    max-width: 100%;
    margin: 0;
    padding: 0;
    align-self: flex-start; /* 新增：让容器宽度由内部内容决定 */
}

.image {
    position: relative;
    width: auto; /* 替换原width:100%，基于aspect-ratio和height计算宽度 */
    height: 60px;
    max-width: 100%;
    aspect-ratio: 1 / 1; /* 简化60/60为1/1，效果一致 */
    margin: 0;
}

修复方案2：直接指定图片容器宽度 #

如果需要明确控制尺寸，也可以直接给.image设置固定宽度，配合aspect-ratio确保比例，Safari能正确识别这个约束：

.image {
    position: relative;
    width: 60px; /* 直接设置目标宽度 */
    height: 60px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
}

问题原因 #

Safari 18对Flex子项+display: contents+aspect-ratio的组合存在兼容性bug：默认状态下Flex子项.helper会被拉伸至容器全宽，.image的width:100%会继承这个无意义的全宽值，导致Safari无法根据aspect-ratio和固定height计算出正确的60px宽度，最终显示为0。上面的两种方案要么让容器跟着内容走，要么直接明确宽度，都能触发Safari正确计算尺寸，同时保持图片左对齐。

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