为什么弹性项目不会缩小内容大小？

Question

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 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

Flex项的自动最小尺寸

您遇到了弹性箱默认设置.

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

默认值是......

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

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

您可以通过将flex项设置为以下来覆盖这些默认值:

• min-width: 0
• min-height: 0
• overflow: hidden(或任何其他值,除外visible)

Flexbox规范

4.5.Flex项的自动最小尺寸

是提供一种用于柔性的项目进行更合理的默认最小大小,本说明书中引入了一个新auto值作为的初始值min-width和min-height在CSS 2.1定义的属性.

关于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方向上的渲染方式不同:row和flex-direction:column

你应用了min-width:0并且项目仍然没有缩小？

嵌套的Flex容器

如果您在HTML结构的多个级别上处理Flex项目,则可能需要覆盖更高级别的默认min-width: auto/ min-height: autoon项目.

基本上,更高级别的弹性项目min-width: auto可以防止缩小嵌套在下面的项目min-width: 0.

例子:

• Flex项目的缩小程度不小于其内容
• 把孩子变成父母
• white-space css属性正在创建flex问题

浏览器渲染说明

• Chrome与Firefox/Edge

  至少从2017年开始,Chrome似乎是(1)恢复到min-width: 0/ min-height: 0默认值,或者(2)0在某些情况下根据神秘算法自动应用默认值.(这可能是他们所说的干预措施.)因此,许多人看到他们的布局(特别是所需的滚动条)在Chrome中按预期工作,但在Firefox/Edge中却没有.此处将详细介绍此问题:Firefox和Chrome之间的灵活缩小差异

• IE11

  如规范中所述,和属性的auto值是"new".这意味着,一些浏览器可能仍然呈现由默认值,因为他们实现柔性布局的值更新前,因为是在初始值和在CSS 2.1.一个这样的浏览器是IE11.其他浏览器已更新为flexbox规范中定义的较新值.min-widthmin-height00min-widthmin-heightauto

修订演示

.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

Answer 2

我发现这多年来一直让我对 flex 和 grid 感到厌烦，所以我将提出以下建议：

* { min-width: 0; min-height: 0; }

然后只需使用min-width: auto或min-height: auto如果您需要该行为。

事实上，还可以使用 box-sizing 来使所有布局更加合理：

* { box-sizing: border-box; min-width: 0; min-height: 0; }

有谁知道是否有任何奇怪的后果？在混合使用上述方法的几年中，我没有遇到任何问题。事实上，我想不出任何我想要从内容向外布局到 flex/grid，而不是 flex/grid 向内布局到内容的情况——当然，如果它们存在，它们很少见。所以这感觉像是一个糟糕的默认值。但也许我错过了什么？