设置flex-shrink:0时Flex项目溢出容器：该行为是否正常？原因是什么？

问题现象 #

当部分Flex子项设置flex-shrink:0且容器设置flex-wrap:nowrap时，Flex容器未自动扩展以容纳所有子项，子项出现溢出。

核心结论 #

这是Flex布局的正常行为，根源在于Flex容器的宽度计算规则以及父容器的约束。

原因解析 #

1. Flex容器的默认宽度特性
   块级Flex容器（display:flex）属于块级元素，在未显式设置宽度时，默认会填充父容器的可用空间，而非自动扩展以适配子项的总宽度。这是块级元素的固有特性，Flex容器也遵循这一规则。

2. flex-wrap:nowrap的布局逻辑
   当设置flex-wrap:nowrap时，所有子项必须在容器的主轴（此处为水平方向）单行排列，容器的主轴空间被限制为父容器的可用宽度（本案例中父容器.contents设置了max-width:90%）。此时：

• 绿色子项（.one、.three）设置了flex:1 0 10rem，即flex-shrink:0，意味着它们不会被压缩，至少保持10rem的宽度，最大可扩展到15rem；
• 黄色子项（.two、.four）设置了flex:0 1 5rem和min-width:5rem，即使允许收缩，也无法小于5rem；
• 当所有子项的最小总宽度（10rem+5rem+10rem+5rem=30rem）超过容器的可用宽度时，子项就会溢出容器，而容器本身不会突破父容器的宽度约束去自动扩展。

代码示例 #

HTML #

<div class="static">
  <div class="contents">
    <div class="container">
    
      <span class="one">ITEM #1</span>

      <span class="two">ITEM #2</span>

      <span class="three">ITEM #3</span>

      <span class="four">ITEM #4</span>

    </div>
  </div>
</div>

CSS #

* {
  box-sizing: border-box;
}

.static {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding: 0.5em 0;
}

.contents {
  display: flex;
  flex-direction: column;
  max-width: 90%;
}

.container {
  position: relative;
  text-align: center;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
  background-color: blue;
}

.container>.one,
.container>.three {
  flex: 1 0 10rem;
  max-width: 15rem;
  background-color: green;
}

.container>.two,
.container>.four {
  flex: 0 1 5rem;
  min-width: 5rem;
  background-color: yellow;
}

结果对比 #

• 实际结果：子项溢出容器
  
• 预期结果：容器自适应容纳所有子项
  

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