Html 如何使用 css 使几个部分溢出的 div

.selected-field-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-section {
  display: flex;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid #CCCED3;
  box-sizing: border-box;
  border-radius: 2px;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  color: #37383A;
  padding: 6px;
  margin-top: 10px;
  width: 195px;
  max-width: 195px;
}

.remove-field {
  display: none;
  background: red;
  color: white;
 }

.field-section:hover .remove-field {
   display: flex;    
}

.selected-field{
   overflow: hidden;
}

.icon-wrap{
  display: flex;
  white-space: nowrap;
  gap: 10px
}

<div class="field-section">
  <div class="selected-field items-center">
    <div class="selected-field-name">hello how are you today?</div>
  </div>
  <div class="d-flex icon-wrap">
    <div class="remove-field" Icon="plus" width="16px" height="16px" (click)="removeField(selectedField)">Plus icon</div>
    <div class="remove-field" Icon="x-close" width="16px" height="16px" (click)="removeField(selectedField)">Close icon</div>
  </div>
</div>