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

弹性项目的自动最小尺寸

您遇到了 flexbox 默认设置。

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

默认值为...

最小宽度：自动

最小高度：自动

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

您可以通过将弹性项目设置为：

最小宽度：0

最小高度：0

溢出：隐藏（或任何其他值，可见除外）

弹性盒规范

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

关于 auto 值...

在主轴上可见溢出的弹性项目上，当在弹性项目的主轴最小尺寸属性上指定时，指定自动最小尺寸。否则计算为 0。

换句话说：

min-width: auto 和 min-height: auto 默认值仅在溢出可见时适用。

如果溢出值不可见，则 min-size 属性的值为 0。

因此，overflow: hidden 可以替代 min-width: 0 和 min-height: 0。

和...

最小尺寸算法仅适用于主轴。

例如，行方向容器中的弹性项目默认情况下不会获得 min-height: auto 。

有关更详细的解释，请参阅这篇文章：min-width rendering different in flex-direction: row and flex-direction: column

min-width 在 flex-direction: row 和 flex-direction: column 渲染不同

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

嵌套的 Flex 容器

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

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

例子：

Flex 项目不会缩小到小于其内容

让孩子适应父母

空白 css 属性正在创建 flex 问题

浏览器渲染说明

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

IE11 如规范中所述，最小宽度和最小高度属性的自动值是“新的”。这意味着某些浏览器可能仍会默认呈现 0 值，因为它们在值更新之前实现了 flex 布局，并且因为 0 是 CSS 2.1 中 min-width 和 min-height 的初始值。一种这样的浏览器是 IE11。其他浏览器已更新为 flexbox 规范中定义的较新的 auto 值。

修改后的演示

.container { 显示：弹性； } .col { 最小高度：200px;内边距：30px；断词：断词 } .col1 { flex: 1;背景：橙色；字体大小：80px；最小宽度：0； /* 新 */ } .col2 { flex: 3;背景：黄色 } .col3 { 弹性：4；背景：天蓝色 } .col4 { 弹性：4；背景：红色 }

jsFiddle

---

多年来，我发现这在 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 向内布局到内容的情况 --- 当然，如果它们存在，它们是罕见的。所以这感觉像是一个糟糕的默认值。但也许我错过了什么？

---

对于下面的这段代码，添加 width: 100% 解决了我的问题。

.post-cover .inner {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: flex-start;
    word-break: break-all;
    z-index: 21;
}
.post-cover .article-page {
    padding: 20px 0;
    margin-bottom: 40px;
    font-size: 0.875em;
    line-height: 2.0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;   /* Add this */
}

---

您的问题的纯粹答案是，默认情况下，浏览器倾向于向读者显示尽可能多的信息（而不是隐藏任何内容）。

默认情况下会发生这种情况，甚至包括在白色背景上显示默认的黑色字体（以获得最大的页面对比度和可读性），在内容大于视口高度（或宽度）的位置添加滚动条或仍显示来自标记的内容（或背景颜色），即使它被错误地放置在 html 文件中的 </body> 甚至 </html> 标记之后。

在 CSS 的上下文中，这也适用，但您也可以在此之上进行许多自定义。

即使在屏幕中使用大字体（如 font-size: 50em;），它最初也会充当溢出元素（并且使用 display: flex 将字体放置在灵活的子容器中不会更改此默认行为，除非您使用 overflow: hidden或以某种方式调整元素的大小。

一个优雅的解决方案是使用字母的动态调整大小，例如

font-size: calc(0.5em + 2vw)

即使在响应式场景中也能很好地工作。

正如前面提到的答案，一个弹性项目不能小于其内容沿主轴的大小（出于同样的原因，这不仅特定于在 CSS 中实现的弹性盒模型，而且因为内部浏览器的工作方式） .如果它比显示宽度长，即使是一个长词也会用滚动条显示，就好像它是一个固定大小的块类型元素一样。

这在旧的 html 4.01 规范中被提及为

“按照惯例，可视化 HTML 用户代理将文本行换行以适应可用边距。换行算法取决于被格式化的脚本。例如，在西方脚本中，文本只能在空白处换行。”

如第 9.5.3 段中的 here 所示。这意味着，从那时起，默认情况下必须连续显示文本（除非我们决定拆分它但不是在单个字符级别：以 120em 大小显示的单个非白色字符将触发滚动条显示在浏览器上）。

同一来源的第 9.1 段中也明确定义了词语：

我们在这里使用术语“单词”来表示“非空白字符的序列”

显示任何单词的原始格式的目的是不破坏、隐藏或扭曲原始信息、代码作者的含义或意图。因此，我们还有   用于将两个连接的单词保持在同一行 - 当打破它们可能会造成破坏时（例如纽约、晚上 10 点、10 公里/小时、§ 10 等）

---

我尝试了一切，甚至将下面的代码放在 index.css 中。

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

但没有任何效果。

最后，我制作了我想要缩小的 div，使其内容超过 position: absolute;。然后它开始缩小。它的父 div 需要定义的高度和宽度。这可能不是每个场景的最佳解决方案，但如果这对您有用，那就太好了！

---