css:flex布局下overflow超出隐藏失效

布局

<div class="container">
    
	<div class="left mo-ellipsis-1">
		左边自适应，超出隐藏
	</div>
	<div class="right">
	    右边固定宽度
	</div>
</div>

css如下

.container {
    display: flex;
}
.left {
    flex: 1;
    /* 需要设置一个宽度 */
    width: 0; 
}
.right {
    width: 500px;
}

.mo-ellipsis-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

问题复现

上面的代码，不一定能复现出现的情况，通过一下代码实际复现真实情况

最外层盒子包裹住里边的两个左右盒子，左边盒子撑满剩余空间，包裹住子元素，子元素设置了超出隐藏的css样式，此时并没有生效

<div class="container">
  <div class="left">
    <div class="mo-ellipsis-1">
      左边自适应，当左边的文字很多的时候，超出隐藏
    </div>
  </div>
  <div class="right">右边固定宽度</div>
</div>

<style>
  .container {
    display: flex;
    width: 800px;
  }

  .left {
    flex: 1;
    background-color: gray;
  }

  .right {
    width: 500px;
    background-color: green;
  }

  .mo-ellipsis-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

出现的效果是这样的，文字超出空间后，省略号并没有显示

解决问题的办法就是在左边盒子上加一个宽度的样式 width: 0;

.left {
 /* 需要设置一个宽度 */
 width: 0;
}

这样就表现为我们需要的效果了

参考
flex布局下overflow失效问题