内文本换行时容器无法自动收缩的解决方案求助

我希望实现两个元素水平对齐：左侧元素文本可随屏幕尺寸变化换行，右侧元素文本不换行。当前左侧元素在文本换行后，未收缩至仅适配内容，仍存在多余空白区域。

示例代码 #

CSS #

.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;
}

HTML #

<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>

解决方案 #

修改CSS代码，即可实现左侧元素自适应收缩内容宽度、右侧元素不换行且紧贴左侧的效果：

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

.item {
  background-color: grey;
  flex: 1; /* 让左侧元素填充容器剩余空间，同时允许收缩 */
  min-width: 0; /* 打破flex元素默认最小宽度限制，允许文本正常换行 */
}

.item2 {
  background-color: green;
  white-space: nowrap;
  align-self: flex-start;
  flex-shrink: 0; /* 禁止右侧元素被压缩，确保始终保持内容宽度不换行 */
}

原理说明 #

• flex: 1 让左侧元素自动分配容器的剩余空间，当屏幕变窄时会自动收缩适配内容。
• min-width: 0 解除flex元素默认的最小宽度限制（默认等于内容宽度），确保文本可以正常换行，元素宽度跟随内容收缩。
• flex-shrink: 0 固定右侧元素的宽度，避免其被压缩，保证文本始终不换行并紧贴左侧元素。

内容的提问来源于stack exchange，提问作者Manuel Nicolás Aceituno