Flexbox中文字省略失效？添加overflow:hidden至父容器后生效的原理

设置在.inner_right上的文字省略（text-overflow: ellipsis）无法生效，给.left容器添加overflow:hidden属性后，文字省略功能正常显示，请问该如何解释这一现象？

示例代码 #

CSS

.box {
  height: 100px;
  width: 100%;
  display: flex;
}

.left {
  flex: 1;
  display: flex;
  background-color: blue;
  /* overflow: hidden;  It will not work without adding this */
}

.right {
  width: 200px;
  background-color: black;
}

.left .inner_left {
  width: 100px;
  background-color: antiquewhite;
}

.left .inner_right {
  flex: 1;
  background-color: aquamarine;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

HTML

<div class="box">
  <div class="left">
    <div class="inner_left"></div>
    <div class="inner_right">
      some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
    </div>
  </div>
  <div class="right"></div>
</div>

原因解释 #

这本质是flex布局的特性导致的：

• flex容器的默认行为：.left是flex容器，设置flex:1本应占据.box除.right之外的剩余空间，但flex容器默认不会限制自身宽度——如果子元素（.inner_left+.inner_right）总宽度超出分配空间，.left会被子元素撑开，跟着变宽，不会维持在预期的剩余空间内。
• 子元素的空间计算：此时.inner_right的flex:1是基于被撑开后的.left宽度计算可用空间，完全能放下所有文本，自然触发不了text-overflow: ellipsis。
• overflow:hidden的作用：给.left加上overflow:hidden后，强制它不能超出自身应分配的宽度（即.box的剩余空间），.inner_right的flex:1只能在这个受限宽度里分配空间。当文本超出时，.inner_right的overflow:hidden隐藏超出部分，配合white-space: nowrap和text-overflow: ellipsis，就会显示省略号。

简单总结：flex容器默认会被子元素撑开，不给父容器加overflow:hidden的话，子元素永远有足够空间，文本省略自然不会生效。

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