这是在使用whitespace-nowrap和overflow属性时非常常见的问题。
要解决这个问题，您需要将display: flex更改为display: inline-flex。
就像这样：

.flex {
  display: inline-flex;
}

这是因为即使文本没有换行，块元素也会占用100%的宽度。内联元素不是这样的。它们总是占用内容的宽度，这正是我们在这里利用的。
注意：您可以将类flex重命名为inline-flex，以使其更直观。
https://jsfiddle.net/3xo0gq1p/

将 selected 类添加到具有长文本的div-element中
接下来将CSS选择器调整为.item .selected {...}

只需将width: fit-content;添加到.item：

.flex-col {
  flex-direction: column;
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

.container {
  overflow: auto;
  resize: horizontal;
  min-width: 10rem;
  max-width: 25rem;
}

.item.selected {
  background-color: green;
  color: red;
}

.item {
  white-space: nowrap;
  width: fit-content; /* 👈 */
}

<div class="flex flex-col h-full">
  <div class="h-full container">
    <div class="flex p-2 items-center item selected">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">1Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">2Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
    <div class="flex p-2 items-center item">
      <div class="flex items-center">-</div>
      <div class="whitespace-nowrap">3Loooooooooooooong text that does not wrap.... aaaaaaaaaa sssssssss ddddddddd</div>
    </div>
  </div>
</div>