html - 为什么 flex 元素不能缩小到超过内容大小？

Question

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

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

观看此video
（开始时，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终遵循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>

Answer 1

弹性物料的自动最小尺寸

您遇到了flexbox默认设置。

伸缩项目不能小于其内容沿主轴的大小。

默认值为...


min-width: auto
min-height: auto


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

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


min-width: 0
min-height: 0
overflow: hidden（或visible以外的任何其他值）




Flexbox规格


  4.5. Automatic Minimum Size of Flex Items
  
  为了为弹性商品提供更合理的默认最小尺寸，
  规范引入了新的auto值作为的初始值
  CSS 2.1中定义的min-width和min-height属性。


关于auto值...


  在主轴上overflow为visible的伸缩项目上，当在伸缩项目的主轴min-size属性中指定时，指定自动最小尺寸。否则计算为0。


换一种说法：


min-width: auto和min-height: auto默认设置仅在overflow为visible时适用。
如果overflow的值不是visible，则min-size属性的值是0。
因此，overflow: hidden可以替代min-width: 0和min-height: 0。


和...


最小尺寸算法仅适用于主轴。
例如，默认情况下，行方向容器中的flex项目不会获取min-height: auto。
有关更详细的说明，请参阅此帖子：


min-width rendering differently in flex-direction: row and flex-direction: column





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

嵌套式弹性容器

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

基本上，具有min-width: auto的较高级别的flex项可以防止在min-width: 0下方嵌套的项上收缩。

例子：


Flex item is not shrinking smaller than its content
Fitting child into parent
white-space css property is creating issues with flex




浏览器渲染说明


Chrome与Firefox / Edge

从2017年开始，Chrome似乎（1）恢复为min-width: 0 / min-height: 0默认值，或者（2）在某些情况下基于神秘算法自动应用0默认值。结果，这就是他们所说的intervention。）因此，许多人看到他们的布局（特别是所需的滚动条）在Chrome中可以正常工作，但在Firefox / Edge中却不能。此问题在这里更详细地介绍：flex-shrink discrepancy between Firefox and Chrome
IE11

如规范中所述，auto和min-width属性的min-height值为“ new”。这意味着某些浏览器在默认情况下仍可能呈现0值，因为它们在值更新之前实现了flex布局，并且因为0是CSS 2.1中min-width和min-height的初始值。 One such browser is IE11.其他浏览器已更新为flexbox spec中定义的更新的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