如何阻止Flex子元素.title拉伸父容器并强制文本换行？

当然可以搞定这个问题！核心思路就是给粉色的.title元素加上宽度限制和flex属性控制，让它没法无限制撑大父容器，同时允许文本自动换行，宽屏时高度自然就会保持在你想要的1-3行状态。

结合你的现有代码，具体调整方案如下：

关键CSS修改 #

给.title添加以下样式：

.section .title {
  background: pink;
  /* 核心控制：不抢占额外空间，允许缩小，基于内容计算基础宽度 */
  flex: 0 1 auto;
  /* 限制最大宽度，避免撑大父容器，可根据布局需求调整百分比或固定值 */
  max-width: 40%;
  /* 确保文本能正常换行，长单词也能拆分 */
  word-wrap: break-word;
  white-space: normal;
}

各属性作用说明 #

• flex: 0 1 auto：
  • flex-grow: 0：不让.title抢占父容器的额外空白空间，宽屏时它只占自身内容需要的宽度（直到触发max-width限制）
  • flex-shrink: 1：当父容器空间不足时，.title可以自动缩小，避免内容溢出
  • flex-basis: auto：以自身内容的宽度作为基础尺寸
• max-width：设定宽度上限，当.title的内容宽度超过这个值时，文本自动换行，从而把高度控制在1-3行左右
• word-wrap: break-word：确保长单词不会因为无法换行而撑破容器，强制拆分换行

适配.values布局的补充优化 #

如果你的.values元素有固定的最小宽度，还可以用calc()来更精准控制.title的最大宽度，比如：

.section .title {
  /* 假设.values的最小宽度是250px */
  max-width: calc(100% - 250px);
}

这样能保证.values始终有足够的展示空间，同时.title在剩余空间内自动换行，布局稳定性更强。

测试一下这个方案：宽屏时.title会在达到max-width后自动换行，高度仅包裹1-3行文本；当.values垂直拉伸时，整个.section的flex布局依然能保持justify-content: space-between的左右分布，不会出现布局错乱。

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