伸缩项目的自动最小大小

您遇到了一个flexbox默认设置。

伸缩项不能小于其内容沿主轴的大小。

默认值是…

min-width:汽车 最小高度:汽车

.．.分别用于行方向和列方向的伸缩项。

你可以通过设置flex项来覆盖这些默认值:

min-width: 0 最小高度:0 溢出:隐藏(或任何其他值，除了可见)

---

Flexbox规范

4.5. Flex的自动最小大小 项目 为伸缩项目提供更合理的默认最小尺寸，此 的初始值引入一个新的auto值 css2.1中定义的min-width和min-height属性。

关于汽车的价值……

在其溢出在主轴上可见的伸缩项上，当在伸缩项的主轴min-size属性上指定时，将指定自动的最小大小。否则计算为0。

换句话说:

min-width: auto和min-height: auto默认值仅在溢出可见时应用。 如果溢出值不可见，则min-size属性值为0。 因此，overflow: hidden可以替代min-width: 0和min-height: 0。

和…

最小大小算法只适用于主轴。 例如，行方向容器中的伸缩项默认情况下不会获得min-height: auto。 更详细的解释请看这篇文章: 在flex方向:行和flex方向:列中不同的最小宽度渲染

---

你已经应用了min-width: 0和项目仍然不收缩?

嵌套式伸缩容器

如果在HTML结构的多个层次上处理伸缩项，可能有必要在更高层次的项目上重写默认的min-width: auto / min-height: auto。

基本上，具有min-width: auto的高级伸缩项可以防止在min-width: 0下面嵌套的项上收缩。

例子:

伸缩项目不会收缩到小于其内容 让孩子融入父母 空白CSS属性在flex中产生问题

---

浏览器渲染说明

Chrome vs. Firefox / Edge Since at least 2017, it appears that Chrome is either (1) reverting back to the min-width: 0 / min-height: 0 defaults, or (2) automatically applying the 0 defaults 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 auto value for the min-width and min-height properties is "new". This means that some browsers may still render a 0 value by default, because they implemented flex layout before the value was updated and because 0 is the initial value for min-width and min-height in CSS 2.1. One such browser is IE11. Other browsers have updated to the newer auto value as defined in the flexbox spec.

---

修改后的演示

.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/网格的情况，而不是从flex/网格向内布局到内容的情况——当然，如果存在的话，它们是很少的。这看起来是个糟糕的违约。但也许我遗漏了什么?

伸缩项目的自动最小大小

您遇到了一个flexbox默认设置。

伸缩项不能小于其内容沿主轴的大小。

默认值是…

min-width:汽车 最小高度:汽车

.．.分别用于行方向和列方向的伸缩项。

你可以通过设置flex项来覆盖这些默认值:

min-width: 0 最小高度:0 溢出:隐藏(或任何其他值，除了可见)

---

Flexbox规范

4.5. Flex的自动最小大小 项目 为伸缩项目提供更合理的默认最小尺寸，此 的初始值引入一个新的auto值 css2.1中定义的min-width和min-height属性。

关于汽车的价值……

在其溢出在主轴上可见的伸缩项上，当在伸缩项的主轴min-size属性上指定时，将指定自动的最小大小。否则计算为0。

换句话说:

min-width: auto和min-height: auto默认值仅在溢出可见时应用。 如果溢出值不可见，则min-size属性值为0。 因此，overflow: hidden可以替代min-width: 0和min-height: 0。

和…

最小大小算法只适用于主轴。 例如，行方向容器中的伸缩项默认情况下不会获得min-height: auto。 更详细的解释请看这篇文章: 在flex方向:行和flex方向:列中不同的最小宽度渲染

---

你已经应用了min-width: 0和项目仍然不收缩?

嵌套式伸缩容器

如果在HTML结构的多个层次上处理伸缩项，可能有必要在更高层次的项目上重写默认的min-width: auto / min-height: auto。

基本上，具有min-width: auto的高级伸缩项可以防止在min-width: 0下面嵌套的项上收缩。

例子:

伸缩项目不会收缩到小于其内容 让孩子融入父母 空白CSS属性在flex中产生问题

---

浏览器渲染说明

Chrome vs. Firefox / Edge Since at least 2017, it appears that Chrome is either (1) reverting back to the min-width: 0 / min-height: 0 defaults, or (2) automatically applying the 0 defaults 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 auto value for the min-width and min-height properties is "new". This means that some browsers may still render a 0 value by default, because they implemented flex layout before the value was updated and because 0 is the initial value for min-width and min-height in CSS 2.1. One such browser is IE11. Other browsers have updated to the newer auto value as defined in the flexbox spec.

---

修改后的演示

.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小提琴

对您的问题的简单回答是，默认情况下，浏览器倾向于向读者显示尽可能多的信息(而不是隐藏任何东西)。

这是默认情况下发生的，甚至包括在白色背景上显示默认的黑色字体(为了最大的页面对比度和可读性)，添加一个滚动条，其中内容大于视口的高度(或宽度)，或者仍然显示标记的内容(或背景颜色)，即使这是错误地放在html文件中的</body>或甚至</html>标记之后。

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

即使在屏幕中使用巨大的字体(如font-size: 50em;)，它最初也会作为一个溢出元素(使用display: flex将字体放置在一个灵活的子容器中不会改变这种默认行为，除非您使用overflow: hidden或以某种方式调整元素大小。

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

字体大小:calc(0.5em + 2vw)

即使在响应式场景中也很有效。

正如前面的回答所提到的，flex项不能小于其沿主轴的内容的大小(出于同样的原因，这不仅特定于CSS中实现的flexbox模型，还因为内部浏览器的工作方式)。即使是一个较长的单词，如果它比显示宽度长，也会显示滚动条，就像它是一个固定大小的块类型元素一样。

这在旧的html 4.01规范中提到

按照惯例，可视HTML用户代理将文本行包装起来以适应其中的内容 可用边距。包装算法依赖于脚本 格式化。 例如，在西方脚本中，文本只能用白色进行包装 空间”。

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

在同一资料来源第9.1段中也明确定义了词语:

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

显示任何单词的原始格式的目的是不破坏、隐藏或扭曲原始信息、含义或代码作者的意图。因此，我们也有&nbsp;为了保持两个相连的单词在同一条线上-当打破它们时可能会造成破坏(如纽约，10点，10公里/小时，§10等)

对于下面的代码，添加宽度: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 */
}

我尝试了所有的方法，甚至把下面的代码放在index.css中。

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

但是什么都不管用。

最后，我把我想要缩小的div内容的位置:绝对;。然后它开始萎缩。 它的父div需要定义高度和宽度。这可能不是每个场景的最佳解决方案，但如果这对你有效，那就太好了!