flex布局，父级不设置固定宽度，子级自适应超出隐藏

项目场景：

多层flex嵌套，且父级不设置固定宽度，子元素也不设置固定宽度，自适应文本隐藏

---

解决方案：

示例：

- dom结构

<div class="attachment-item">
      <div class="attachment-item-icon">
        <img
          src="https://t8.baidu.com/it/u=945984959,3948445137&fm=85&app=131&size=f242,150&n=0&f=JPEG&fmt=auto?s=FEEBAA56CC371C1318339BFC0300903B&sec=1699981200&t=dec68eddf1426e615b1ecde7b0bf6a68"
          alt=""
        />
      </div>
      <div class="attachment-item-name">
        <div class="attachment-item-name_text">
          我是文件名称我是文件名称我是文件名称我是文件名称我是文件名称我是文件名称
        </div>
        <div class="file-size">7.83M</div>
      </div>
      <div class="attachment-item-menu">
        <div class="attachment-item-link-preview">预览</div>
        <div class="attachment-item-link-download">下载</div>
        <div class="attachment-item-link-delete">删除</div>
        <div class="attachment-item-status">
          <i class="el-icon-success" />
        </div>
      </div>
    </div>

- css样式

.attachment-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.attachment-item-name {
  display: flex;
  align-items: center;
  flex: 1; //重点样式
  min-width: 0; //重点样式
  white-space: nowrap; //重点样式
}
.attachment-item-name .attachment-item-name_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-item-menu {
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.attachment-item-menu > div {
  margin-left: 10px;
}```