我尝试将两个元素水平对齐，左边的元素包含可以换行的文本，然后调整屏幕大小，右边的元素不允许换行。当内容换行时，第一个元素保持内容的宽度+（换行的单词-导致换行的像素），而不是缩小以适应内容。
我在Fiddle上创建了一个示例，您可以看到第一个元素的灰色背景中有几个像素没有内容，而不是调整大小以仅包含文本。

.container {
  display: flex;
  width: 760px;
}

.item {
  background-color: grey;
  width: fit-content;
  block-size: fit-content;
}

.item2 {
  background-color: green;
  white-space: nowrap;
  align-self: flex-start;
}

<div class="container">
  <div class="item"><span> This Text to auto-adjust to only fit the content when wrapping</span></div>
  <div class="item2">This should be right next to last word on first line on the left</div>
</div>

JSFiddle Demo
有没有一种方法可以在调整屏幕大小时实现自动调整大小，使2个元素尽可能接近第一个元素的文本？