コンテナの高さに基づいた要素のサイズ変更CSS

Question

私のページの最初のセクションをユーザのウィンドウの100％にしようとしていますが、画面の高さに応じて3つの垂直アイテムのサイズを変更しています。私はフレキシボックスを使用しています、これを達成するために

、特にこれらのスタイル：

CSS

.vertical-content { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    height: 100%; 
} 

.theitems { 
    flex-grow: 1; 
} 

は、これは機能しますが、いくつかの奇妙な理由でそれが唯一のFirefoxで正しく要素のサイズを変更します。 Safariは画像を伸ばし、Chromeはサイズを変更しません。私が与えたフレックス仕様（flex-grow: 1）は、アイテムがすべてコンテナ内に垂直に収まるようにアイテムのサイズを変更すると考えました。 （正）

クロム（不正）

サファリ（不正）

のFirefox

JSFiddle

誰もがここで何が起こっているのか任意のアイデアを持っていますか？

Answer 1

内の要素を与えることができます。

コンテナを指定しましたjustify-content: space-between。

しかし、あなたはまた、各フレックスアイテムflex-grow: 1を与えました。

各アイテムが使用可能なスペースをすべて消費するように設定されている場合、justify-content: space-betweenは何もしません（配布するスペースはありません）。

いずれかを選択します。

Answer 2

なぜvhを使用しないのですか？

height: 100vh //This is 100% of the viewport 

次に、あなたが一緒にうまく機能しない2つのルールを混合しているように見えます33.33vh