如何让Flex项目文本换行填充高度并缩小宽度？

我编写了如下HTML代码：

<style>
      .f-container {
          display: flex;
      }

      .f-item {
          border: 1px solid lightgray;
          height: 40px;
          word-break: break-all;
      }
</style>

<div class="f-container">
  <div class="f-item">some long content here that stretches very long</div>
</div>

当前渲染效果为：

_________________________________________________
|some long content here that stretches very long|
|                                               |
|_______________________________________________|

我需要让Flex项目内的文本自动换行，以缩小项目宽度，达到如下效果：

_________________________
|some long content here  |
|that stretches very long|
|________________________|

请问能否通过Flex项目实现该需求？或者是否有其他替代方案？

当然可以用Flex布局实现这个需求，核心是给Flex项目设置宽度限制，让文本有换行的空间，具体有几种实用的调整方式：

方式一：给Flex项目设置max-width #

直接给.f-item加max-width属性，指定一个合适的最大宽度，文本就会自动换行：

.f-item {
    border: 1px solid lightgray;
    height: 40px;
    word-break: break-all;
    max-width: 200px; /* 这个值可以根据需求调整 */
}

方式二：用flex-basis配合容器的flex-wrap #

如果后续容器里要加多个项目，希望它们能自动换行，同时单个项目限制宽度，可以给容器开flex-wrap: wrap，再给项目设flex-basis（基础宽度）：

.f-container {
    display: flex;
    flex-wrap: wrap;
}

.f-item {
    border: 1px solid lightgray;
    height: 40px;
    word-break: break-all;
    flex-basis: 200px; /* 基础宽度 */
    flex-grow: 0; /* 不让项目自动拉伸占满容器 */
}

方式三：结合width: fit-content和max-width #

让项目宽度自适应内容，但用max-width限制最大宽度，也能达到换行缩小宽度的效果：

.f-item {
    border: 1px solid lightgray;
    height: 40px;
    word-break: break-all;
    width: fit-content;
    max-width: 200px;
}

另外提个小建议：你现在给.f-item设了固定height: 40px，文本换行后可能会超出容器，建议把它改成min-height: 40px，或者直接去掉固定高度，让容器根据内容自动调整高度。

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