这个问题其实是Flex布局里很容易踩的一个默认行为坑，我来给你拆解清楚：

核心原因：默认生效的flex-shrink属性 #

Flex子项有三个核心的布局控制属性，默认值分别是：

• flex-grow: 0：不会主动抢占父容器的剩余空间
• flex-shrink: 1：当父容器空间不足以容纳子项的基础尺寸时，自动收缩子项
• flex-basis: auto：子项的基础尺寸由自身的width/height决定

回到你的示例：

• 父容器宽度是50vw，子项设置width:150%，理论上要达到父容器宽度的1.5倍
• 但因为flex-shrink:1默认开启，浏览器会计算子项超出父容器的宽度比例，自动收缩子项尺寸，最终让它刚好适配父容器的范围，不会超出。

验证结论的小实验 #

给子项加上flex-shrink:0，禁用自动收缩行为，你设置的width:150%就会生效：

.child { 
  border: 1px solid blue; 
  width: 150%; 
  flex-shrink: 0; /* 关闭收缩逻辑 */
}

此时子项就会超出父容器，完全按照你设置的比例显示。

额外补充：Flex布局中width的特殊角色 #

在Flex布局里，如果你没有显式设置flex-basis，子项的width（或垂直方向的height）会被当作「基础尺寸」的 fallback 值。浏览器会先基于这个尺寸计算总占用空间，再结合flex-grow和flex-shrink调整最终显示的大小。

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