ファンキーなフレックスボックスの高さ

Question

これは、私がフレックスボックスを使用して達成できない非常に単純な構造です。

私は身体の中にヘッダーとボディエレメントを持っています。私は長い（高さの）エレメントを持っています。その後、私はボディー内に小さなフッターを持っています。コンテンツをスクロール可能にし、フッターを常に表示したい。

私はflexboxを使用するためにすべてを設定しました。私はflex-direction: columnを使って垂直方向の位置決めを行いました。flex: 1は未定義の高さの要素で残りのスペースを占有します。

奇妙なことに、高さ50ピクセルの私のヘッダーは高さ20ピクセルで、コンテンツはまったくスクロールできません。または、それは私の望んでいない小さなフッタ（緑色）です。それは問題のクロスブラウザを作成するようパーセントと高さを使用して、内部要素とフレキシボックスを組み合わせる。..

DEMO HERE

.flex { display: flex; } 
 
.flex1 { flex: 1; } 
 
.col { flex-direction: column; } 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.green { background-color: green; } 
 
.yellow { background-color: yellow; } 
 
.pad { padding: 10px 15px; } 
 
.h50 { height: 50px; }

<div class="flex col" style="height: 100vh;"> 
 
    <div class="red h50"> 
 
    Wtf? 
 
    </div> 
 
    <div class="blue flex1 pad"> 
 
    <div class="flex col" style="height: 100%"> 
 
     <div class="yellow flex1" style="overflow: auto;"> 
 
     <div style="height: 1500px"> 
 
      Long content here 
 
     </div> 
 
     </div> 
 
     <div class="green h50"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

は、良いアイデアではありません。

使用フレキシボックスすべての方法、ここで私は子供にflex1をheight: 100%を取り出して、その子は親の高さを記入しますblueにflexを追加し、これら2つの要素のクラスを、更新することにより、その親の幅をいっぱいになるようにします。

<div class="blue flex1 pad flex"> 
    <div class="flex flex1 col"> 

はまたCOMMEに基づいて更新

body { margin: 0; } 
 
.flex { display: flex; } 
 
.flex1 { flex: 1; } 
 
.col { flex-direction: column; } 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.green { background-color: green; } 
 
.yellow { background-color: yellow; } 
 
.pad { padding: 10px 15px; } 
 
.h50 { height: 50px; }

<div class="flex col" style="height: 100vh;"> 
 
    <div class="red h50"> 
 
    Wtf? 
 
    </div> 
 
    <div class="blue flex1 pad flex"> 
 
    <div class="flex flex1 col"> 
 
     <div class="yellow flex1" style="overflow: auto;"> 
 
     <div style="height: 1500px"> 
 
      Long content here 
 
     </div> 
 
     </div> 
 
     <div class="green h50"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

---

スニペットbody

スタックにmargin: 0を追加しましたnt、Firefoxはblue要素にmin-height: 0が必要と思われる。フレックス項目について

は、そのデフォルトmin-height/width値はそう0に変えることを解決し、そのコンテンツのサイズより縮小するからそれらを防ぐauto、です。

スタックが、それはまだ同じ結果だ

body { margin: 0; } 
 
.flex { display: flex; } 
 
.flex1 { flex: 1; } 
 
.col { flex-direction: column; } 
 
.red { background-color: red; } 
 
.blue { background-color: blue; } 
 
.green { background-color: green; } 
 
.yellow { background-color: yellow; } 
 
.pad { padding: 10px 15px; } 
 
.h50 { height: 50px; } 
 
.mh { min-height: 0; }

<div class="flex col" style="height: 100vh;"> 
 
    <div class="red h50"> 
 
    Wtf? 
 
    </div> 
 
    <div class="blue flex1 pad flex mh"> 
 
    <div class="flex flex1 col"> 
 
     <div class="yellow flex1" style="overflow: auto;"> 
 
     <div style="height: 1500px"> 
 
      Long content here 
 
     </div> 
 
     </div> 
 
     <div class="green h50"> 
 
     
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>