為什麼彈性項目不會縮小到超過內容大小？
P粉242126786
2023-08-27 16:35:08
<p>我有 4 個 Flexbox 列，一切正常，但是當我在列中新增一些文字並將其設為大字體大小時，由於 Flex 屬性，它會使列比應有的寬度更寬。 </p>
<p>我嘗試使用<code>word-break：break-word</code>並且它有所幫助，但是當我將列的大小調整到非常小的寬度時，文本中的字母被分成多行（一個字母每行），但列的寬度不會小於一個字母的大小。 </p>
<p>觀看此視頻
（一開始，第一列是最小的，但是當我調整視窗大小時，它是最寬的列。我只想始終尊重 Flex 設定；Flex 大小 1 : 3 : 4 : 4）</p>
<p>我知道，將字體大小和列填充設置為較小會有所幫助......但是還有其他解決方案嗎？ </p>
<p>我無法使用<code>overflow-x:hidden</code>。 </p>
<p>JSFiddle</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.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
}</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>
我發現多年來 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中定义的 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 }