flex布局中子項(xiàng)目尺寸不受flex-shrink限制的問(wèn)題解決
我要評(píng)論預(yù)期是寫一個(gè)如下所示的布局內(nèi)容：
即有一個(gè)固定高度的外部容器，頂部的header已知高度，在header占據(jù)了固定高度后，剩下的都分給body部分。因此采用flex布局，header設(shè)置flex-shrink為0，不自動(dòng)收縮，body則flex-shrink為1，使其高度壓縮為剩余高度。這個(gè)操作看起來(lái)挺符合直覺(jué)的。
然后在上述的body中有個(gè)content-wrapper內(nèi)容塊，設(shè)置height: 100%以及overflow: auto來(lái)讓他高度占滿父容器并且內(nèi)容過(guò)多時(shí)生成滾動(dòng)條。
demo代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測(cè)試pre標(biāo)簽</title>
<style>
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
.container {
width: 800px;
height: 500px;
display: flex;
flex-direction: column;
}
.header {
height: 100px;
background-color: rgb(226, 110, 110);
flex-shrink: 0;
}
.body {
flex-shrink: 1;
background-color: rgb(146, 146, 223);
}
.content-wrapper {
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="header">Header</div>
<div class="body">
<div class="content-wrapper">
<div style="height: 1000px">很多很多的內(nèi)容</div>
</div>
</div>
</div>
</body>
</html>
但最終效果確實(shí)如此：
很明顯body的高度并沒(méi)有被限制，實(shí)際的高度是子元素的內(nèi)容高度。
So why? 用搜索引擎搜了許久沒(méi)找到理想的答案，這種問(wèn)題確實(shí)也很難以表述。我現(xiàn)在真正想知道的是：為什么我給flex布局中的子項(xiàng)目設(shè)置了flex-shrink: 1，但它卻沒(méi)按我預(yù)期的表現(xiàn)呢。網(wǎng)絡(luò)上相關(guān)的資料都僅僅告知如使用的，對(duì)于我想知道的，最適合的資料應(yīng)該是翻flex這塊的實(shí)現(xiàn)標(biāo)準(zhǔn)。
依據(jù)https://www.w3.org/TR/css-flexbox-1/一節(jié)中的描述，首先是這么句話：
Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties.
可知彈性項(xiàng)目的min-width和min-height的默認(rèn)值是auto，并不同于其他布局中的情況（默認(rèn)為0）。
再往下來(lái)看：
To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.
這段話描述了在主軸方向上，上述的auto值應(yīng)該如何計(jì)算彈性項(xiàng)目的寬/高度（我的例子中是flex-direction: column，因此主軸為垂直方向，關(guān)注點(diǎn)是min-height）。由上可知，對(duì)于彈性項(xiàng)目如果其是非滾動(dòng)容器，min-height值為內(nèi)容高度；反之則是0。
綜上，demo中的問(wèn)題，修改方法之一就是，將div.body變?yōu)闈L動(dòng)容器，即設(shè)置overflow為scroll、auto或者hidden（沒(méi)錯(cuò)hidden屬性也是，因?yàn)?code>hidden只是隱藏溢出的內(nèi)容不提供滾動(dòng)條，但仍然可以通過(guò)js控制里邊的內(nèi)容來(lái)達(dá)到滾動(dòng)效果，所以該情況也是滾動(dòng)容器）。另一種方式是我們可以直接覆蓋min-height的默認(rèn)值，即顯示設(shè)置min-height: 0 也能達(dá)到目的。
到此這篇關(guān)于flex布局中子項(xiàng)目尺寸不受flex-shrink限制的問(wèn)題解決的文章就介紹到這了,更多相關(guān)flex子項(xiàng)目尺寸不受flex-shrink限制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css彈性盒flex-grow、flex-shrink、flex-basis詳解
這篇文章主要介紹了css彈性盒flex-grow、flex-shrink、flex-basis詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面2021-01-27
詳解flex布局中flex-grow與flex-shrink的計(jì)算方式
這篇文章主要介紹了詳解flex布局中flex-grow與flex-shrink的計(jì)算方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨2019-12-17
flex-grow、flex-shrink、flex-basis和九宮格布局理解
這篇文章主要介紹了flex-grow、flex-shrink、flex-basis和九宮格布局理解的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要2019-07-25
詳解關(guān)于flex-shrink如何計(jì)算的冷知識(shí)
本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于flex-shrink如何計(jì)算？flex-shrink的計(jì)算方法介紹，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助2018-10-25
