CSS Flexbox子项宽度溢出父容器、长文本自动换行方案咨询

固定宽Flex容器单侧定宽、自适应侧内容溢出的无calc解决方案 #

溢出问题由两个默认布局规则导致：

• 给自适应侧子项设置width: 100%不符合Flex空间分配逻辑：该值以父容器全宽为计算基准，没有扣除左侧固定宽子项占据的空间，天然会产生宽度溢出
• Flex子项默认min-width: auto，规则限制子项宽度不能小于内部内容的最小宽度，遇到连续无空格的超长单词/长数字时，内容本身的宽度会直接撑破子项边界

不需要手动calc计算的原生实现方案：

1. 删掉右侧自适应子项的width: 100%声明，添加flex: 1，该属性会让子项自动占据父容器扣除固定宽子项后的所有剩余空间，完全不需要手动计算宽度
2. 给右侧自适应子项添加min-width: 0，覆盖默认的auto值，允许子项宽度收缩到内容最小宽度以下，从布局规则层面避免子项撑破容器。

容器内文本自动换行兼容性最优方案 #

要覆盖所有场景（包括连续超长英文单词、长串数字、无空格URL等特殊内容），同时保证正常文本的断行符合阅读习惯，兼容IE6及以上所有主流浏览器的属性组合如下：

/* 确保默认换行规则生效，覆盖继承的不换行属性 */
white-space: normal;
/* 标准属性：允许长内容在必要时断行，避免溢出 */
overflow-wrap: break-word;
/* 兼容旧版IE/Edge的别名属性 */
word-wrap: break-word;
/* 适配现代浏览器，避免极端场景下的溢出，不会强制截断正常短单词 */
word-break: break-word;

注意不要单独使用word-break: break-all，该属性会在容器宽度边缘强制截断所有内容，哪怕短单词有足够空间放到下一行也会被强行截断，严重影响阅读体验。

修正后可直接运行的完整代码 #

<style>
.container {
  width: 300px;
  background-color:#0f0;
  display: flex;
}
.left {
  width:200px;
  background-color:#f00;
}
.right {
  flex: 1;
  min-width: 0;
  background-color:#ff0;
  /* 文本自动换行配置 */
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
</style>

<div class="container">
    Container 300px
</div>

<div class="container">
  <div class="left">
    This text.
  </div>
  <div class="right">
    This is a prettyveryveryveryveryveryveryveryveryveryveryveryverylong word. 
  </div>
</div>

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