HTMLの新しいFlexbox APIを使ったフルハイトアプリでの垂直スクロール実装

flexプロパティの基本

CSSのflexプロパティは、flex-grow（伸び率）、flex-shrink（縮み率）、flex-basis（基本サイズ）という3つのプロパティをまとめて指定できるショートハンドです。フレックスコンテナ内の各アイテム（フレックスアイテム）に対して、柔軟な長さの挙動を一行で設定できます。

フルハイトアプリで垂直スクロールを実現する方法

高さ固定のアプリ画面（フルハイトレイアウト）で、コンテンツがあふれたときにだけスクロールさせたい場合は、フレックスアイテムの高さを0pxに設定するのがポイントです。

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 0px; /* ここで高さを0pxに設定 */
}

height: 0pxを指定すると、アイテムはコンテンツ量に関わらず親コンテナの高さに収まり、はみ出した部分はoverflow-y: autoによって垂直スクロールできるようになります。

最小の高さを持たせたい場合

アイテムにある程度の最小の高さを持たせたい場合は、次のようにheight: 100pxを指定します。この指定はmin-height: 100pxを設定した場合と同じように機能します。

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    height: 100px; /* ここで高さを100pxに設定 */
}

補足：モダンブラウザでの記述

上記の-webkit-flexは、旧式のWebKit系ブラウザ向けのベンダープレフィックス付き記述です。現在の主要ブラウザでは、標準のflexプロパティをそのまま使用できます。

#container article {
    flex: 1 1 auto;
    overflow-y: auto;
    height: 0px;
}

親要素側の設定も忘れずに

この手法を正しく機能させるには、親コンテナにもフレックスレイアウトの設定が必要です。

#container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

これにより、ヘッダーやフッターを固定したまま、記事部分だけをスクロールさせる、アプリらしいレイアウトを簡単に実現できます。