多行文本时如何收缩Flex布局中的左侧容器？

当左侧容器内的文本换行至多行时，左侧块会被拉伸至最大宽度，右侧块则靠右对齐。要让左侧块收缩至最小宽度，使右侧块直接紧跟在文本（示例中的"very2"单词）之后，只需给左侧块添加width: fit-content;样式即可。

修改后的完整代码 #

<style>
.container {
  background: lightgray;
  width: 300px;
  padding: 10px;
}

.row {
  display: flex;
  gap: 10px;
}

.left {
  background: lightyellow;
  width: fit-content; /* 核心修改 */
}

.right {
  background: lightskyblue;
}
</style>

<div class="container">
  <div class="row">
    <div class="left">
      Left
    </div>
    <div class="right">
      Right
    </div>
  </div>
  
  <div class="row">
    <div class="left">
      Very very long text very very2 longtexttexttext very 
    </div>
    <div class="right">
      Right
    </div>
  </div>
</div>

替代方案 #

也可以用flex-basis: fit-content;替代width: fit-content;，效果完全一致：

.left {
  background: lightyellow;
  flex-basis: fit-content;
}

原理说明 #

默认情况下，Flex布局中flex-basis: auto会让左侧块占据容器的剩余空间（文本换行时），而fit-content会让元素宽度适配内容的实际所需宽度，同时保留文本自动换行的特性，这样右侧块就能自然紧跟在左侧块之后。

内容的提问来源于stack exchange，提问作者evd