如何消除Flex布局中换行文本右侧的多余空白？

我有一个设置了gap: 8px的flexbox容器，当缩小容器宽度导致内部文本换行时，容器右侧会出现多余的空白间隙，不符合预期。

代码示例 #

CSS代码

.container {
  width: 290px;
  gap: 8px;
  display: flex;
}

.block {
  background: red;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div class="block">First Second ThirdFourthFifth</div>
      <div class="block">Block 2</div>
      <div class="block">Block 3</div>
    </div>
  </body>
</html>

预期效果 #

文本换行后，容器能贴合内容宽度，右侧不会出现多余空白，同时保持flex项之间8px的间隙；且宽度足够时，文本保持单行显示，宽度不足时自动换行。

已尝试的方案 #

• 使用width: min-content：会强制文本始终换行，不符合“宽度足够时保持单行”的需求。
• 使用white-space: nowrap：文本无法在宽度受限时自动换行，也不符合需求。

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