コンテナがページの100％を占めることなく、フレックスボックスの中間部分をスクロールします。

Question

フレックスボックスの子が成長する代わりにスクロールバーを持つようにするには、固定高さのコンテナをとります。隔離された環境で作成する 簡単：

https://jsfiddle.net/1yjk5ojp/

#container { 
    height: 100%; 
    display: flex; 
    flex: 0 0 auto; 
    flex-flow: column; 
} 

#list { 
    display: flex; 
    flex-flow: column; 
    overflow: auto; 
} 

しかし、のは、私はページのヘッダーを使用したいとしましょう。 正確なサイズはわからないので、私はmerginでabosluteの位置を使用することはできません。 途中でフレックスコンポーネントを使用することもできません。固定サイズでなければなりません。例えば

は - 100pxにヘッダ

<div style="height: 100px;"> 
    <h1>Page header</h1> 
</div> 

https://jsfiddle.net/z6dsq822/1/

iは、未知のサイズの部品の後に固定の高さの部品を作るために何かできることがある追加しましたか？

私の制約は、私は別のスクロールバーを望んでいないということである、と私はヘッダは、この構造の外側になりたい（それは異なる見解を持つ大規模なアプリケーションの、ヘッダがテンプレートである）

Answer 1

親を作りますコンテナすべてflexcolumnと#container〜flex-grow: 1に設定して、使用可能な領域を占めるようにしてください。

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
html, 
 
body { 
 
    height: 100vh; 
 
} 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
header { 
 
    flex: 0 0 100px; 
 
} 
 

 
#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-grow: 1; 
 
    overflow: auto; 
 
} 
 

 
#list { 
 
    display: flex; 
 
    overflow: scroll; 
 
    flex-direction: column; 
 
    flex-grow: 1; 
 
} 
 

 
#top { 
 
    flex: 0 0 20px; 
 
    background-color: #db9277; 
 
} 
 

 
#bottom { 
 
    flex: 0 0 20px; 
 
    background-color: #db9277; 
 
} 
 

 
.row { 
 
    height: 100px; 
 
    background-color: #85d8d5; 
 
}

<header> 
 
    header 
 
</header> 
 
<div id="container"> 
 
    <div id="top"></div> 
 
    <div id="list"> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    <div class="row">Lorem ipsum dolor sit amet.</div> 
 
    </div> 
 
    <div id="bottom"></div> 
 
</div>