Warum schrumpfen flexible Elemente nicht über die Inhaltsgröße hinaus?
P粉242126786
2023-08-27 16:35:08
<p>Ich habe 4 Flexbox-Spalten und alles funktioniert einwandfrei, aber wenn ich der Spalte etwas Text hinzufüge und sie auf eine große Schriftgröße einstelle, wird die Spalte aufgrund der Flex-Eigenschaft breiter, als sie sein sollte. </p>
<p>Ich habe es mit <code>word-break:break-word</code> versucht und es hat geholfen, aber als ich die Spaltenbreite auf eine sehr kleine Breite geändert habe, wurden die Buchstaben im Text in mehrere Zeilen aufgeteilt (eine). (Buchstabe pro Zeile), aber die Spaltenbreite darf nicht kleiner als die Größe eines Buchstabens sein. </p>
<p>Sehen Sie sich dieses Video an
(Anfangs ist die erste Spalte die kleinste, aber wenn ich die Größe des Fensters ändere, ist sie die breiteste Spalte. Ich möchte einfach immer die Flex-Einstellungen respektieren; Flex-Größe 1:3:4:4) </p>
<p>Ich weiß, es würde helfen, die Schriftgröße und den Spaltenabstand kleiner zu machen ... aber gibt es eine andere Lösung? </p>
<p>Ich kann <code>overflow-x:hidden</code> nicht verwenden. </p>
<p>JSFiddle</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.container {
Anzeige: Flex;
Breite: 100 %
}
.col {
Mindesthöhe: 200 Pixel;
Polsterung: 30px;
Wortbruch: Wortbruch
}
.col1 {
Flex: 1;
Hintergrund: orange;
Schriftgröße: 80px
}
.col2 {
Flex: 3;
Hintergrund: gelb
}
.col3 {
Flex: 4;
Hintergrund: himmelblau
}
.col4 {
Flex: 4;
Hintergrund: rot
}</pre>
<pre class="brush:html;toolbar:false;"><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></pre>
<p><br /></p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
我发现多年来 Flex 和 grid 一直困扰着我，所以我提出以下建议：
* { min-width: 0; min-height: 0; }然后如果您需要这种行为，只需使用
min-width: auto或min-height: auto即可。事实上，还可以加入框大小以使所有布局更加合理：
* { box-sizing: border-box; min-width: 0; min-height: 0; }有人知道是否会产生任何奇怪的后果吗？在混合使用上述方法的几年里我还没有遇到过任何问题。事实上，我想不出任何我想要从内容向外布局到 Flex/Grid 的情况，而不是从 Flex/Grid 向内布局到内容的情况 --- 当然，如果它们存在，它们也是罕见的。所以这感觉像是一个糟糕的默认值。但也许我错过了一些东西？
Flex 项目的自动最小尺寸
您遇到了 Flexbox 默认设置。
弹性项目不能小于其内容沿主轴的尺寸。
默认值是...
最小宽度：自动最小高度：自动...分别用于行方向和列方向的弹性项目。
您可以通过将弹性项目设置为来覆盖这些默认值：
最小宽度：0最小高度：0溢出：隐藏（或任何其他值，可见除外）Flexbox 规范
关于
auto值...换句话说：
min-width: auto和min-height: auto默认值仅在overflow可见时适用.overflow值不可见，则min-size属性的值为0。overflow: hide可以替代min-width: 0和min-height: 0。还有...
min-height: auto。你已经应用了 min-width: 0 但项目仍然没有缩小？
嵌套 Flex 容器
如果您要处理 HTML 结构的多个级别上的 Flex 项目，则可能需要覆盖默认的
min-width: auto/min-height: auto code> 位于更高级别的项目上。基本上，具有
min-width: auto的更高级别的 Flex 项目可以防止使用min-width: 0嵌套在下面的项目收缩。示例：
浏览器渲染说明
Chrome 与 Firefox / Edge
至少自 2017 年以来，Chrome 似乎要么 (1) 恢复到
min-width: 0/min-height: 0默认值，或者 ( 2) 基于神秘算法在某些情况下自动应用0默认值。 （这可能就是他们所说的干预。）因此，许多人人们看到他们的布局（尤其是所需的滚动条）在 Chrome 中按预期工作，但在 Firefox / Edge 中却不然。此处更详细地介绍了此问题：Firefox 和 Chrome 之间的 flex-shrink 差异IE11
如规范中所述，
min-width和min-height属性的auto值为“新”。这意味着某些浏览器默认情况下仍可能呈现0值，因为它们在更新该值之前实现了 Flex 布局，并且0是min 的初始值CSS 2.1。 IE11 就是这样的浏览器。 其他浏览器已更新到较新的flexbox 规范中定义的 auto值a>.修改后的演示
.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 }