overflow：hidden失效，该怎么改

<tr class="hang" v-for="(item, i) in info" :key="i">
        <td class="content-left">{{ item.describes }}</td>
        <td class="content-right">{{ item.responsibleName }}</td>
 </tr>

.hang {
  display: flex;
  justify-content: space-between;
}
.content-left {
  // width: 65%;
  padding: 10px 0;
  color: white;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
}
.content-right {
  margin-left: 30px;
  width: 20%;
  padding: 10px 0;
  color: white;
  font-size: 16px;
}

这个overflow：hidden失效了，应该怎么改

没设置宽度，你把宽度给注释掉了，它还怎么判断是否超出宽度了呢，overflow就失效了呀

你这样式写的有点乱啊，flex布局设置了space-between,子元素就不要设置flex：1了。子元素设置宽度的时候不要忘了flex-shrink:0。overflow要生效前提是必须能获得标签宽度的（额外提示：注意overflow是不可以用在设置flex布局的当前标签下的）