如何让flex子项自动扩容避免水平溢出flex容器？

问题原因 #

你当前给.flexItem设置的flex: 1等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0%，会强制所有子项均分flex容器的总宽度，内容长度超过均分宽度的子项就会出现横向溢出。

修改方案 #

调整.flexItem的样式即可满足需求：

.flexItem {
  background-color: darkcyan;
  /* 替换原来的flex-basis、flex属性 */
  flex: 1 1 auto;
  /* 解除flex子项默认最小宽度限制，允许收缩到小于内容宽度 */
  min-width: 0;
  /* 长文本自动换行，避免横向溢出 */
  overflow-wrap: break-word;
}

属性说明 #

• flex: 1 1 auto：将flex基础宽度设为auto，子项首先会根据自身内容计算基础宽度，容器有剩余空间时可自动扩容，空间不足时可自动收缩，符合你“默认容纳自身全部内容、可自动扩容”的需求。
• min-width: 0：flex布局中子项默认的min-width为auto，会导致子项最小宽度等于内容宽度，就算设置了收缩规则也不会收缩到小于内容宽度，手动设为0即可解除这个限制。
• overflow-wrap: break-word：当子项收缩到内容宽度以下时，长文本会自动换行，不会横向溢出子项范围。

可选：不换行显示省略号 #

如果你不希望内容换行，超出部分显示省略号，可以替换成以下样式：

.flexItem {
  background-color: darkcyan;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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