为何item-outer-container未触发溢出？横向滚动条未出现原因

元素item-outer-container的宽度小于其子元素div，但未出现横向滚动条，请问该溢出未被检测到的原因是什么？

代码示例 #

CSS代码

#container {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translateY(-50%) translateX(50%);
  padding: 20px;
  border: solid 1px;
  border-radius: 100px;
  width: 90%;
  
  display: flex;
  align-items: center;

  >* {
    width: calc(100%/3);
  }
}

span {
  height: 40px;
  border-radius: 20px;
}

#blu-button-container {
  flex-shrink: 1;

  span {
    display: block;
    width: 150px;
    background-color: blue;
  }
}

#title {
  min-width: 200px;
  text-align: center;
  font-weight: bold;
}

#item-outer-container {
  overflow: auto;
  height: 50px;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: end;

  div {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: end;
    gap: 5px;

    span {
      width: 40px;
      background-color: red;
    }
  }
}

HTML代码

<div id=container>
  <div id=blu-button-container>
    <span></span>
  </div>
  <div id=title>TITLE</div>
  <div id=item-outer-container>
    <div>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>

原因分析 #

核心问题出在flex容器的默认行为上：

• item-outer-container是flex容器（设置了display: flex），而flex容器的默认min-width值为auto。这意味着容器的最小宽度会自动适配子元素的内容宽度，哪怕父容器给它分配的宽度更小，它也会被子元素撑开，最终实际宽度和子元素保持一致。
• 既然容器实际宽度和子元素一致，overflow: auto自然不会触发横向滚动条——只有当容器宽度明确小于子元素，且容器不会被内容撑开时，才会出现滚动。

解决方法 #

给item-outer-container添加min-width: 0，打破flex容器默认的最小宽度规则，让它保持父容器分配的宽度，当子元素超出时就会触发滚动：

#item-outer-container {
  overflow: auto;
  height: 50px;
  flex-shrink: 1;
  display: flex;
  align-items: center;
  justify-content: end;
  min-width: 0; /* 添加这一行 */

  /* 其余样式不变 */
}

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