为什么伸缩项目不缩小过去的内容大小?

我有4个flexbox列，一切都很好，但当我添加一些文本到一个列，并将其设置为一个大的字体大小，它是使列宽比它应该由于flex属性。

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

观看视频 (在开始时，第一列是最小的，但当我调整窗口大小时，它是最宽的列。我只是想尊重伸缩设置;伸缩尺寸1:3:4:4)

我知道，将字体大小和列填充设置为较小会有所帮助……但是有没有其他的解决办法呢?

我不能使用overflow-x: hidden。

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>

141498 次浏览
小开
最佳答案

伸缩项目的自动最小大小

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

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

默认值是…

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

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

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

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

Flexbox规范

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

关于auto值…

在主轴上的overflow为visible的伸缩项上，当在伸缩项的主轴min-size属性上指定时，指定自动最小尺寸。否则，它将计算为0。

换句话说:

  • min-width: auto和min-height: auto默认值仅在overflow为visible时适用。
  • 如果overflow值不是visible, min-size属性的值是0。
  • 因此，overflow: hidden可以代替min-width: 0和min-height: 0。

和…

小开

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

小开

对于下面的代码，添加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中实现的flexbox模型，而且因为内部浏览器的工作方式)。即使是一个较长的单词，如果它比显示宽度长，也会显示滚动条，就像它是一个固定大小的块类型元素一样。

这在旧的html 4.01规范中提到

根据惯例，可视HTML用户代理将文本行包装以适应其中的内容 可用边距。包装算法依赖于脚本 格式化。< / p > 例如，在西方脚本中，文本只能用白色换行 空间。“< / p >

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

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

我们用“词”这个词;这里指的是“非空白序列” characters" < / p >

显示任何单词的原始格式的目的是不破坏、隐藏或扭曲原始信息、含义或代码作者的意图。因此，我们也有&nbsp;来保持两个连接的单词在同一行中-当打破它们时可能会中断(例如New York, 10pm, 10km /h，§10，等等)

小开

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

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

但是什么都不管用。

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


提交答案