Html 为什么 flex items 不缩小超过内容大小？

Why don't flex items shrink past content size?

提问by tomas657

I have 4 flexbox columns and everything works fine, but when I add some text to a column and set it to a big font size, it is making the column wider than it should be due to the flex property.

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

I tried to use word-break: break-wordand it helped, but still when I resize the column to a very small width, letters in the text are broken into multiple lines (one letter per line), and yet the column does not get smaller width than one letter size.

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

Watch this video(at the start, the first column is the smallest, but when I resized the window, it is the widest column. I just want to respect flex settings always; flex sizes 1 : 3 : 4 : 4)

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

I know, setting font-size and column padding to smaller will help... but is there any other solution?

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

I can not use overflow-x: hidden.

我不能用overflow-x: hidden。

JSFiddle

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>

回答by Michael Benjamin

The Automatic Minimum Size of Flex Items

Flex 项目的自动最小尺寸

You're encountering a flexbox default setting.

您遇到了 flexbox 默认设置。

A flex item cannot be smaller than the size of its content along the main axis.

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

The defaults are...

默认值为...

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

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

...for flex items in row-direction and column-direction, respectively.

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

You can override these defaults by setting flex items to:

您可以通过将 flex 项设置为：

• min-width: 0
• min-height: 0
• overflow: hidden(or any other value, except visible)

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

---

---

Flexbox Specification

弹性盒规范

4.5. Automatic Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new autovalue as the initial value of the min-widthand min-heightproperties defined in CSS 2.1.

4.5. Flex 项目的自动最小尺寸

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

With regard to the autovalue...

至于auto价值...

On a flex item whose overflowis visiblein the main axis, when specified on the flex item's main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0.

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

In other words:

换句话说：

• The min-width: autoand min-height: autodefaults apply only when overflowis visible.
• If the overflowvalue is not visible, the value of the min-size property is 0.
• Hence, overflow: hiddencan be a substitute for min-width: 0and min-height: 0.

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

and...

和...

• The minimum sizing algorithm applies only on the main axis.
• For example, a flex item in a row-direction container does not get min-height: autoby default.
• For a more detailed explanation see this post:
  • min-width rendering differently in flex-direction: row and flex-direction: column

• 最小尺寸算法仅适用于主轴。
• 例如，min-height: auto默认情况下不会获取行方向容器中的 flex 项。
• 有关更详细的解释，请参阅此帖子：
  • 最小宽度在 flex-direction: row 和 flex-direction: column 中呈现不同

---

---

You've applied min-width: 0 and the item still doesn't shrink?

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

Nested Flex Containers

嵌套的 Flex 容器

If you're dealing with flex items on multiple levels of the HTML structure, it may be necessary to override the default min-width: auto/ min-height: autoon items at higher levels.

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

Basically, a higher level flex item with min-width: autocan prevent shrinking on items nested below with min-width: 0.

基本上，一个更高级别的 flex 项目min-width: auto可以防止在嵌套在 with 下方的项目上收缩min-width: 0。

Examples:

例子：

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

• Flex 项目不会缩小小于其内容
• 让孩子融入父母
• 空白 css 属性会导致 flex 出现问题

---

---

Browser Rendering Notes

浏览器渲染注意事项

• Chrome vs. Firefox / Edge

  Since at least 2017, it appears that Chrome is either (1) reverting back to the min-width: 0/ min-height: 0defaults, or (2) automatically applying the 0defaults in certain situations based on a mystery algorithm. (This could be what they call an intervention.) As a result, many people are seeing their layout (especially desired scrollbars) work as expected in Chrome, but not in Firefox / Edge. This issue is covered in more detail here: flex-shrink discrepancy between Firefox and Chrome

• IE11

  As noted in the spec, the autovalue for the min-widthand min-heightproperties is "new". This means that some browsers may still render a 0value by default, because they implemented flex layout before the value was updated and because 0is the initial value for min-widthand min-heightin CSS 2.1. One such browser is IE11.Other browsers have updated to the newer autovalue as defined in the flexbox spec.

• Chrome 与 Firefox / Edge

  至少从 2017 年开始，Chrome 似乎要么 (1) 恢复到min-width: 0/min-height: 0默认值，要么 (2)0基于神秘算法在某些情况下自动应用默认值。（这可能就是他们所说的干预。）因此，许多人看到他们的布局（尤其是所需的滚动条）在 Chrome 中按预期工作，但在 Firefox / Edge 中却没有。此处更详细地介绍了此问题：Firefox 和 Chrome 之间的 flex-shrink 差异

• IE11

  如规范中所述，和属性的auto值是“新的”。这意味着一些浏览器可能仍然默认渲染一个值，因为它们在值更新之前实现了 flex 布局，并且是CSS 2.1 中的and的初始值。一种这样的浏览器是 IE11。其他浏览器已更新为flexbox 规范中定义的较新值。min-widthmin-height00min-widthmin-heightauto

---

---

Revised Demo

修改后的演示

.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

js小提琴