flex布局等分列被长文本撑破 如何固定列宽并实现内容换行

问题原因 #

Flex 子项的默认 min-width 属性值为 auto，该规则优先级高于 flex: 1 定义的宽度分配规则，会导致子项最小宽度至少等于其内容宽度，所以内容超出等分宽度时就会撑大列，打破等分效果。

解决方法 #

方案1：覆盖默认min-width规则（推荐，内容可自动换行展示） #

给两个flex列添加 min-width: 0 同时配置文本换行属性即可，修改后的CSS代码如下：

.row {
  display: flex;
  flex-direction: row;
 }
.columnLeft {
  flex: 1;
  min-width: 0; /* 覆盖默认的min-width:auto */
  overflow-wrap: break-word; /* 长文本/长单词自动换行 */
  background-color: coral;
  display: flex;
  flex-direction: column;
}
.columnRight {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  background-color: green;
  display: flex;
  flex-direction: column;
}

方案2：通过overflow限制宽度 #

如果不需要完整展示超出内容，或者希望超出部分滚动展示，也可以给列添加overflow属性：

.columnLeft, .columnRight {
  flex: 1;
  overflow: hidden; /* 超出内容隐藏，换成auto则超出区域出现滚动条 */
  overflow-wrap: break-word;
}

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