flex布局下如何让文本宽度优先级高于max-width的div且保留换行能力

解决方案 #

问题根源是flex子项的width属性会作为flex-basis的默认计算值，左右div设置width: 100%后基础宽度占满父容器，自然会挤压中间文本的空间。按以下方式修改即可：

1. 将中间的裸文本包裹在<span>标签中，作为独立的flex子项控制布局
2. 去掉左右div的width: 100%设置，替换为flex: 1，保留max-width: 500px限制最大宽度

修改后代码示例 #

<div style="display: flex; flex-direction: row;">
  <div style="flex: 1; max-width: 500px; height: 200px; background-color: red;"></div>
  <span>Hello Multiple words</span>
  <div style="flex: 1; max-width: 500px; height: 200px; background-color: red;"></div>
</div>

效果说明 #

• 父容器宽度充足时：左右div平分剩余空间，最大不超过500px，中间文本完全占用自身所需宽度，不会提前换行
• 父容器宽度不足时：左右div优先收缩，直到宽度为0后中间文本才会正常换行，符合不使用white-space: nowrap的要求

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