メインコンテナが水平のときにフレキシブルコンテナが収縮フレックスボックス

Question

いつも表示されるはずのヘッダーコンポーネントがある私のSPA用のシンプルなレイアウトを作成したいと思います。フッターコンポーネントは、画面の下部にあるか、メインコンテンツコンポーネントが画面よりも大きい場合は、コンテンツコンポーネントの下にある必要があります。そして、画面がコンテンツより大きい場合、残りのスペースを取得する必要があるメインのコンテンツコンポーネントは、フッターコンポーネントが下部に表示されるようにします。

現在、私はこのcodepenのレイアウトを再現しました。しかし、codepenの結果ウィンドウを十分に縮小すると、フッターコンポーネントがその上にあるため、Test2テキストが表示されないポイントに到達します。私が期待する動作は、Test2のテキストを見ることができ、フッターコンポーネントまでスクロールできることです。

コンテンツコンポーネントがflex-direction: rowのフレックスボックスではない場合に機能します。なぜこれがうまくいかないのでしょうか？

私のSPAではReactを使用していますので、これにはJavaScriptを使用したくありません。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-size: 2rem; 
 
} 
 

 
.page { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    width: 100%; 
 
    background: yellow; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
    overflow: scroll; 
 
} 
 

 
.main { 
 
    flex: 1; 
 
    background: red; 
 
    display: flex; 
 
    flex-direction: row; 
 
    min-height: 30px; 
 
} 
 

 
.test { 
 
    display: block; 
 
} 
 

 
.footer { 
 
    background: green; 
 
}

<div class="page"> 
 
    <div class="header">Header</div> 
 
    <div class="container"> 
 
    <div class="main"> 
 
     Main 
 
     <div class="test">Test1<br />Test2<br/></div> 
 
    </div> 
 
    <div class="footer">Footer</div> 
 
    </div> 
 
</div>

Answer 1

だけフレックス追加：1 0自動クラスを.mainために私の最終的なコードだ...ハックリトルしかし、それは動作します

。 Flexプロパティは、flex-grow、flex-shrink、およびflex-basisです。だから0でそれは縮小しないように言われています。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-size: 2rem; 
 
} 
 

 
.page { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    width: 100%; 
 
    background: yellow; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
    overflow: scroll; 
 
} 
 

 
.main { 
 
    flex: 1 0 auto; 
 
    background: red; 
 
    display: flex; 
 
    flex-direction: row; 
 
    min-height: 30px; 
 
} 
 

 
.test { 
 
    display: block; 
 
} 
 

 
.footer { 
 
    background: green; 
 
}

<div class="page"> 
 
    <div class="header">Header</div> 
 
    <div class="container"> 
 
    <div class="main"> 
 
     Main 
 
     <div class="test">Test1<br />Test2<br/></div> 
 
    </div> 
 
    <div class="footer">Footer</div> 
 
    </div> 
 
</div>

Answer 2

私はそれが働いてしまいました。コンテンツの周りにdisplay: block;のdivを追加する必要があり、コンテナコンポーネントにjustify-content: space-between;を追加しました。

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    font-size: 2rem; 
 
} 
 

 
.page { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    width: 100%; 
 
    background: yellow; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 1; 
 
    justify-content: space-between; 
 
    overflow: scroll; 
 
} 
 

 
.block { 
 
    display: block; 
 
} 
 

 
.main { 
 
    background: red; 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.test { 
 
    display: block; 
 
} 
 

 
.footer { 
 
    background: green; 
 
}

<div class="page"> 
 
    <div class="header">Header</div> 
 
    <div class="container"> 
 
    <div class="block"> 
 
    <div class="main"> 
 
     Main 
 
     <div class="test">Test1<br />Test2<br/></div> 
 
    </div> 
 
    </div> 
 
    <div class="footer">Footer</div> 
 
    </div> 
 
</div>