overflow：hidden失效，该怎么改

Question

<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失效了，应该怎么改

Answer 1

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