Flex 项目的自动最小尺寸

您遇到了 flexbox 默认设置。

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

默认值为...

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

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

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

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

弹性盒规范

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

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

至于autovalue...

在柔性项，它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 项。
• 有关更详细的解释，请参阅此帖子：
  • 最小宽度在 flex-direction: row 和 flex-direction: column 中呈现不同

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

嵌套的 Flex 容器

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

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

例子：

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

浏览器渲染注意事项

• 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

修改后的演示

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

js小提琴

我发现这多年来一直让我对 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 */
}