CSS 布局排障

帮我排查一个 CSS 布局问题。

【现象】{{现象描述}}
【相关代码】
{{相关代码}}
【环境】{{环境}}
【已尝试】{{已尝试}}

请输出：
一、最可能的原因排序（最多 3 个）：每个原因说明「为什么它符合我描述的现象」，引用我代码里的具体行。
二、验证方法：每个原因配一个 1 分钟内的验证动作（改某个值看变化 / 在 DevTools 里看某项 computed 值），先验证再修，不要让我盲改。
三、修复代码：给出改动前后的 diff，并解释每处改动的作用；若需要同时兼容旧浏览器请标注。
四、为什么会发生：用 2-3 句讲清底层机制（如 min-width:auto 对 flex 子项的影响），让我下次能自己认出来。
五、同类排查清单：这一类问题（溢出/塌陷/层叠任选与我现象最相关的）的 5 步排查顺序。

要求：不要建议 overflow:hidden 这类掩盖式方案，除非同时给出真正修复；不确定的写「需要我补充什么信息」。