Width 100%与overflow:auto失效：动态宽度下实现内部滚动

我遇到了一行文本无法被父元素隐藏的问题，希望元素宽度保持动态，但始终无法解决。我试图让红色边框的盒子在蓝色边框的盒子内滚动，同时让container和die_results的宽度保持动态，请问能否不使用固定宽度实现这一效果？

原始代码 #

.container {  
  border: 6px solid black;  
  display: flex;
  width: 100%;
 
}

.die_results {
  border: 2px solid green;
  display: flex;
  width: 100%;    

}

.low_rolls_container {
  border: 2px solid blue;
  width: 100%;  
  overflow: auto;
}

.low_rolls {
  border: 2px solid red;
  font-size: 5rem;
  padding: 2px 5px 0 0;
  white-space: nowrap;
}

<div class="container">
  <div class="die_results">
    <div class="low_rolls_container">
      <div class="low_rolls">1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13</div>
    </div>
    <div class="high_roll">23</div>
  </div>
  <div class="die_results">
    <div class="low_rolls_container">
      <div class="low_rolls">1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13</div>
    </div>
    <div class="high_roll">23</div>
  </div> 
</div>

解决方案（无需固定宽度） #

核心是打破flex布局的默认最小宽度约束，让容器能正确收缩并触发滚动。具体修改如下：

修改后的CSS代码 #

.container {  
  border: 6px solid black;  
  display: flex;
  width: 100%;
}

.die_results {
  border: 2px solid green;
  display: flex;
  flex: 1; /* 替换width:100%，实现动态平分父容器宽度 */
  min-width: 0; /* 关键：允许flex元素收缩到小于内容最小宽度 */
}

.low_rolls_container {
  border: 2px solid blue;
  flex: 1; /* 替换width:100%，动态填充.die_results内的剩余空间 */
  overflow: auto;
  min-width: 0; /* 确保容器能收缩，触发滚动 */
}

.low_rolls {
  border: 2px solid red;
  font-size: 5rem;
  padding: 2px 5px 0 0;
  white-space: nowrap;
}

原理说明 #

• flex:1让.die_results自动平分父容器的可用宽度，实现完全动态的响应式布局；
• min-width:0是解决问题的核心：默认情况下flex元素的最小宽度等于内容宽度，设置后允许容器收缩到小于内容宽度，此时overflow:auto才能生效，让红色边框的子元素在蓝色容器内滚动而不溢出；
• .low_rolls_container设置flex:1后，会自动填充.die_results中除了.high_roll之外的所有剩余空间，同时保持滚动功能。

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