如何让嵌套CSS Flex子元素随可用空间伸缩且不超父容器宽度

我有一个宽度固定为500px的父级flex容器，内部包含若干内容和一个子flex容器。需求是带flex-fill类的flex子元素填充所有可用空间，但绝对不能超出父容器的宽度限制——无论内部嵌套什么内容，父元素宽度都要保持在500px以内。

但当前CSS设置下，当子flex容器内的内容宽度超过允许的最大空间时，容器会持续扩张，完全无视边界限制（即便已经设置了flex-shrink: 1和overflow: hidden）。

原代码 #

CSS

.parent {
  width: 500px;
  height: 50px;
  
  margin-bottom: 10px;
}

.flex {
  display: flex;
  flex-direction: row;
}

.flex-fill {
  flex-grow: 1;
  flex-shrink: 1;
}

.first-level-child {      
  /* for demonstrating its size easily */
  background-color: lightblue;
}

.second-level-child {
  /* I was assuming this will clip long text? */
  overflow: hidden;
  background-color: coral;
}

p {
  /* to make sure it has large width */
  white-space: nowrap;
}

HTML

<div class="parent flex">
  <div> <p>Some content</p> </div>
  
  <div class="first-level-child flex flex-fill">
    <div class="second-level-child flex-fill">
      <!--<p>If short content, all good.</p>-->
      <p>If there is very long text here, the first and second level children end up growing. This is not good: the parent div of this text should not care, and always take just the allowed space.</p>
    </div>
    
    <div> <p>Other content<p> </div>
  </div>
  
  <div> <p> Etc... </p> </div>
</div>

问题原因 #

核心问题在于flex容器的默认最小尺寸规则：flex容器的min-width默认值为auto，这意味着它会优先保证容纳内部内容的完整宽度，哪怕这个宽度超出了父容器的限制。你给二级子元素设置了overflow: hidden，但一级子flex容器本身没有被限制最小宽度，它会被内部的长文本撑开，进而导致整个父容器突破500px的宽度限制。

修复方案 #

只需要给一级子flex容器添加min-width: 0，打破默认的最小尺寸约束，再配合二级子元素的overflow: hidden，就能实现需求：

修改后的CSS

.parent {
  width: 500px;
  height: 50px;
  
  margin-bottom: 10px;
}

.flex {
  display: flex;
  flex-direction: row;
}

.flex-fill {
  flex-grow: 1;
  flex-shrink: 1;
}

.first-level-child {      
  background-color: lightblue;
  /* 关键：打破flex容器默认最小宽度限制 */
  min-width: 0;
}

.second-level-child {
  overflow: hidden;
  background-color: coral;
}

p {
  white-space: nowrap;
}

效果说明 #

修改后，父容器会始终保持500px宽度，带flex-fill类的元素会自动填充剩余可用空间；当内部文本过长时，二级子元素的overflow: hidden会生效，裁切超出部分，不会再撑开容器。

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