为什么弹性项目不能缩小到超过内容大小？

我有4个flexbox列，并且一切正常，但是当我向列中添加一些文本并将其设置为大字体时，由于flex属性，它使列变宽了。

我尝试使用word-break: break-word它并对其有所帮助，但是当我将列的大小调整为非常小的宽度时，文本中的字母会分成多行（每行一个字母），但是该列的宽度不会小于一个字母的大小。

观看此视频 （开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循flex设置； flex大小为1：3：4：4）

我知道，将字体大小和列填充设置为较小会有所帮助...但是还有其他解决方案吗？

我不能使用overflow-x: hidden。

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

弹性物料的自动最小尺寸

您遇到了flexbox默认设置。

弹性项目不能小于其内容沿主轴的大小。

默认值为...

• min-width: auto
• min-height: auto

...分别用于行方向和列方向的弹性项目。

您可以通过将弹性项目设置为来覆盖这些默认值：

• min-width: 0
• min-height: 0
• overflow: hidden（或其他任何值，除外visible）

Flexbox规格

4.5。自动伸缩物品的最小尺寸

为了为弹性商品提供更合理的默认最小尺寸，此规范引入了一个新auto值作为CSS 2.1中定义的min-width和min-height属性的初始值。

关于auto价值...

在柔性项，它overflow是visible在与主轴线，当在柔性项的主轴最小尺寸属性指定，指定了一个自动的最小尺寸。否则计算为0。

换一种说法：

• 在min-width: auto和min-height: auto违约时才适用overflow的visible。
• 如果overflow值不是visible，则min-size属性的值为0。
• 因此，overflow: hidden可以代替min-width: 0和min-height: 0。

和...

• 最小尺寸算法仅适用于主轴。
• 例如，min-height: auto默认情况下，行方向容器中的flex项目不会获得。
• 有关更详细的说明，请参阅此帖子：
  • 最小宽度渲染在flex-direction：行和flex-direction：列上有所不同

您已应用min-width：0，但项目仍不缩小？

嵌套式弹性容器

如果要在HTML结构的多个级别上处理弹性项目，则可能有必要在较高级别的项目上覆盖默认值min-width: auto/ min-height: auto。

基本上，带有的较高级别的柔韧性商品min-width: auto可以防止嵌套在下方的商品收缩min-width: 0。

例子：

• 伸缩项目的收缩率不小于其含量
• 让孩子适合父母
• 空格css属性导致flex问题

浏览器渲染说明

• Chrome与Firefox / Edge

  从2017年开始，Chrome似乎（1）恢复为min-width: 0/ min-height: 0默认值，或者（2）0在某些情况下基于神秘算法自动应用默认值。结果，这就是他们所谓的干预。）因此，许多人看到他们的布局（尤其是所需的滚动条）在Chrome中可以正常工作，但在Firefox / Edge中却无法正常工作。此处更详细地介绍了此问题：Firefox和Chrome之间的弹性收缩差异

• IE11

  正如规范所指出的，auto对价值min-width和min-height性质是“新”。这意味着某些浏览器可能仍0默认情况下呈现值，因为它们在更新值之前实现了flex布局0，min-width并且min-height是CSS 2.1中和的初始值。IE11就是这样一种浏览器。其他浏览器已更新为flexbox规范中auto定义的较新值。

修改后的演示

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle