<div class="parent">
  <div class="flex-child">1. This is a long string that is OK to truncate please and thank you</div>
  <div class="flex-end"></div>
</div>
<hr>
<!--第二种会出现滚动条
原因是你不让h3 换行,长度被占用了
-->
<div class="parent">
  <div class="one-flex-child"><h3>1. This is a long string that is OK to truncate please and thank you</h3></div>
  <div class="flex-end"></div>
</div>
<div class="parent">
  <div class="two-flex-child"><h3>1. This is a long string that is OK to truncate please and thank you</h3></div>
  <div class="flex-end"></div>
</div>


.parent {
  display: flex;
  align-items: center;
  padding: 10px;
  margin: 30px 0;
}

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

.flex-end {
  width: 200px;
  height: 50px;
  background-color: cornsilk;
}
/*-------第二种 会出现滚动条----*/
.one-flex-child{
  flex:1;
}
h3{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*第三种,就是比较完美的结论*/
.two-flex-child{
  flex:1;
  min-width:0;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.