帶有可滾動面板的Flexbox

Question

我正在嘗試實現可以​​伸展以填充屏幕的佈局，但是當內容大於可用窗格時會滾動。

我有一個基於this answer的基本flexbox方法，它填補了屏幕很好的工作，但溢出的內容導致整個屏幕滾動，而不僅僅是自己的容器。

如果我將.outer高度更改爲像200px這樣的文字值，那麼我會得到我想要的滾動行爲，但底部內容窗格不再填滿屏幕。

我已經嘗試過使用display: table和相關的CSS而不是flexbox，但最終獲得了相同的結果。

我也對內容窗格的高度使用calc認爲 - 像

height: calc(100% - 60px); 

，但我想報頭能夠與它的含量增加，所以我沒有硬值因爲它的高度來計算。

我在這裏尋找一個純粹的CSS解決方案，而不是用一些味道的Javascript來調整窗口大小。

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0 
 
} 
 
.box { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100%; 
 
} 
 
.box .row { 
 
    border: 1px dotted grey; 
 
    flex: 1 1 auto; 
 
} 
 
.box .row.header { 
 
    background: aliceblue; 
 
} 
 
.box .row.content { 
 
    background: pink; 
 
} 
 
.box .row.content .title { 
 
    height: 40px; 
 
    background: yellow; 
 
} 
 
.outer { 
 
    height: -webkit-calc(100% - 40px); 
 
    height: -moz-calc(100% - 40px); 
 
    height: -o-calc(100% - 40px); 
 
    height: calc(100% - 40px); 
 
    overflow-y: auto; 
 
} 
 
.inner { 
 
    height: 100%; 
 
} 
 
.text { 
 
    height: 100px; 
 
    margin-top: 10px; 
 
    border: 1px solid gold; 
 
}

<div class="box"> 
 
    <div class="row header"> 
 
    <p><b>header</b> 
 
     <br /> 
 
     <br />(sized to content)</p> 
 
    </div> 
 
    <div class="row content"> 
 
    <div class="title"> 
 
     <b>content</b> 
 
     (fills remaining space) 
 
    </div> 
 
    <div class="outer"> 
 
     <div class="inner"> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     </div><!-- inner --> 
 
    </div><!-- outer --> 
 
    </div> 
 
</div>

Answer 1

希望這是你所期望的行爲。

html, 
 
body { 
 
    height: 100%; 
 
    widht: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    flex-flow: column; 
 
    flex-wrap: nowrap; 
 
    height: 100%; 
 
} 
 
.box .row { 
 
    border: 1px dotted grey; 
 
    flex: 0 0 auto; 
 
    overflow: auto; 
 
} 
 
.box .row.header { 
 
    background: aliceblue; 
 
} 
 
.box .row.content { 
 
    flex: 1 1 auto; 
 
    display: flex; 
 
    flex-flow: column; 
 
    flex-wrap: nowrap; 
 
    background: pink; 
 
} 
 
.box .row.content .title { 
 
    height: 40px; 
 
    background: yellow; 
 
    flex: 0 0 auto; 
 
} 
 
.text { 
 
    height: 100px; 
 
    margin-top: 10px; 
 
    border: 1px solid gold; 
 
} 
 
.outer { 
 
    height: 100%; 
 
    flex: 1 1 auto; 
 
    overflow-y: auto; 
 
} 
 
.inner { 
 
    height: 100%; 
 
}

<div class="box"> 
 
    <div class="row header"> 
 
    <p><b>header</b> 
 
     <br /> 
 
     <br />(sized to content)</p> 
 
    </div> 
 
    <div class="row content"> 
 
    <div class="title"> 
 
     <b>content</b> 
 
     (fills remaining space) 
 
    </div> 
 

 
    <div class="outer"> 
 

 
     <div class="inner"> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
     <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 

 
     </div> 
 
     <!-- inner --> 
 

 
    </div> 
 
    <!-- outer --> 
 

 

 
    </div> 
 
</div>

Answer 2

的關鍵，這個佈局識別柔性項目的最小尺寸：

4.5. Implied Minimum Size of Flex Items

爲Flex項目進行更合理的默認最小大小，這個 規範引入了一個新的auto的值作爲初始值 min-width和min-height在CSS 2.1中定義的屬性。

換句話說，默認情況下，Flex項目永遠不會小於其內容的大小。

在柔性項目初始設置：

min-width: auto; 
min-height: auto; 

這有可能迫使項目溢出其容器的潛力。

解決方案是在水平卷軸上應用min-width: 0，在柔性容器上應用垂直卷軸的min-height: 0。

下面是一個使用你的代碼的簡化演示（JS的只是重複.text元素）：

function multiplyNode(node, count, deep) { 
 
    for (var i = 0, copy; i < count - 1; i++) { 
 
     copy = node.cloneNode(deep); 
 
     node.parentNode.insertBefore(copy, node); 
 
    } 
 
} 
 

 
multiplyNode(document.querySelector('.text'), 10, true);

* { box-sizing: border-box; } 
 

 
html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    border: 1px solid black; 
 
} 
 

 
.box { 
 
    display: flex; 
 
    flex-flow: column; 
 
    height: 100%; 
 
} 
 

 
.header { 
 
    background-color: aqua; 
 
    flex: 0 0 auto; 
 
} 
 

 
.content { 
 
    background-color: yellow; 
 
    flex: 1; 
 
    display: flex;    /* new */ 
 
    flex-direction: column;  /* new */ 
 
    min-height: 0;    /* new; allow flex item to be smaller than its content, 
 
            enabling scroll */ 
 
} 
 

 
.outer { 
 
    background-color: pink; 
 
    flex: 1; 
 
    overflow-y: auto; 
 
} 
 

 
.text { 
 
    height: 100px; 
 
    margin-top: 10px; 
 
    border: 1px solid gold; 
 
}

<div class="box"> 
 
    <div class="header">header (sized to content, i.e., height: auto;)</div> 
 
    <div class="content">content (fills remaining space, i.e. flex: 1;) 
 
      <div class="outer"> 
 
       <div class="inner"> 
 
        <div class="text">Bacon ipsum dolor amet tongue corned beef landjaeger sausage beef meatball, kielbasa pastrami turkey boudin hamburger ham hock chuck tail pork. Shankle tail cupim ribeye.</div> 
 
        </div><!-- inner --> 
 
      </div><!-- outer --> 
 
    </div><!-- content --> 
 
</div><!-- box -->

測試在Chrome，FF和IE11。

的更多信息：

• Why doesn't flex item shrink past content size?
• Rendering problems using flexbox in Firefox and Chrome 48