flex布局中子項(xiàng)目尺寸不受flex-shrink限制的問題解決

發(fā)布時(shí)間：2022-05-10 16:07:28 作者：謎原

本文主要介紹了flex布局中子項(xiàng)目尺寸不受flex-shrink限制的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

預(yù)期是寫一個(gè)如下所示的布局內(nèi)容：

即有一個(gè)固定高度的外部容器，頂部的header已知高度，在header占據(jù)了固定高度后，剩下的都分給body部分。因此采用flex布局，header設(shè)置flex-shrink為0，不自動(dòng)收縮，body則flex-shrink為1，使其高度壓縮為剩余高度。這個(gè)操作看起來挺符合直覺的。
然后在上述的body中有個(gè)content-wrapper內(nèi)容塊，設(shè)置height: 100%以及overflow: auto來讓他高度占滿父容器并且內(nèi)容過多時(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的高度并沒有被限制，實(shí)際的高度是子元素的內(nèi)容高度。

So why? 用搜索引擎搜了許久沒找到理想的答案，這種問題確實(shí)也很難以表述。我現(xiàn)在真正想知道的是：為什么我給flex布局中的子項(xiàng)目設(shè)置了flex-shrink: 1，但它卻沒按我預(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）。

再往下來看：

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中的問題，修改方法之一就是，將div.body變?yōu)闈L動(dòng)容器，即設(shè)置overflow為scroll、auto或者hidden（沒錯(cuò)hidden屬性也是，因?yàn)?code>hidden只是隱藏溢出的內(nèi)容不提供滾動(dòng)條，但仍然可以通過js控制里邊的內(nèi)容來達(dá)到滾動(dòng)效果，所以該情況也是滾動(dòng)容器）。另一種方式是我們可以直接覆蓋min-height的默認(rèn)值，即顯示設(shè)置min-height: 0 也能達(dá)到目的。

到此這篇關(guān)于flex布局中子項(xiàng)目尺寸不受flex-shrink限制的問題解決的文章就介紹到這了,更多相關(guān)flex子項(xiàng)目尺寸不受flex-shrink限制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！