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

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

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

看这个video http://screencast-o-matic.com/watch/cDetln1tyT（一开始，第一列是最小的，但是当我调整窗口大小时，它是最宽的列。我只想始终尊重 Flex 设置；Flex 大小 1 : 3 : 4 : 4）

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

我不能使用overflow-x: hidden.

JSFiddle https://jsfiddle.net/78h8wv4o/3/

.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>

Flex 项目的自动最小尺寸

您遇到了弹性盒默认设置。

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

默认值是...

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

...分别针对行方向和列方向的弹性项目。

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

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

弹性盒规格

4.5.自动最小柔性柔性尺寸 项目 https://www.w3.org/TR/css-flexbox-1/#min-size-auto

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

关于auto价值...

在一个弹性项目上overflow is visible在主轴中，当在 Flex 项目主轴最小尺寸属性上指定时，指定一个自动最小尺寸。否则它计算为0.

换句话说：

• The min-width: auto and min-height: auto仅当以下情况时才应用默认值overflow is visible.
• If the overflow值不是visible，最小尺寸属性的值为0.
• Hence, overflow: hidden可以替代min-width: 0 and min-height: 0.

and...

• 最小尺寸算法仅适用于主轴。
• 例如，行方向容器中的弹性项目不会获得min-height: auto默认情况下。
• For a more detailed explanation see this post:
  • 最小宽度在 flex-direction: row 和 flex-direction: column 上呈现不同 https://stackoverflow.com/q/40407619/3597276

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

嵌套 Flex 容器

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

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

例子：

• Flex 项目收缩时不会小于其内容 https://stackoverflow.com/q/47456839/3597276
• 让孩子适应父母 https://stackoverflow.com/q/44826555/3597276
• 空白 CSS 属性给 Flex 带来了问题 https://stackoverflow.com/q/49897730/3597276

浏览器渲染注释

• Chrome 与 Firefox / Edge

  至少自 2017 年以来，Chrome 似乎要么 (1) 恢复到min-width: 0 / min-height: 0默认值，或 (2) 自动应用0基于神秘算法在某些情况下默认。 （这可能就是他们所说的干涉 https://github.com/WICG/interventions.）因此，许多人看到他们的布局（尤其是所需的滚动条）在 Chrome 中按预期工作，但在 Firefox / Edge 中却不然。这个问题在这里有更详细的介绍：Firefox 和 Chrome 之间的 flex-shrink 差异 https://stackoverflow.com/q/49575838/3597276

• IE11

  如规范中所述，auto的值min-width and min-height属性是“新的”。这意味着某些浏览器可能仍会呈现0默认值，因为他们在值更新之前实现了弹性布局，并且因为0是初始值min-width and min-height in CSS 2.1 http://www.w3.org/TR/CSS2/visudet.html#min-max-widths. IE11 就是这样的浏览器之一。 https://stackoverflow.com/questions/40052987/flexbox-flex-basis-0px-in-chrome其他浏览器已更新至较新版本auto中定义的值弹性盒规格 http://www.w3.org/TR/css-flexbox-1/#min-size-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 https://jsfiddle.net/78h8wv4o/4/