フレックスアイテム25％高さ

Question

フレックスボックスを使用して自動的に高さを塗りつぶすカラムがあります。この中に、それぞれのコンテナの高さの25％になる4つのアイテムがあります。

私は現在のコードを表示するためにこのフィドルを作成しました：https://jsfiddle.net/fc66rfo3/1/ 右の青色のボックスが黄色のコンテナの高さの25％になるようにします。

私はこの回答を使用しています：https://stackoverflow.com/a/23442782/3909886私のコードの作業をしようとすると、項目がちょうど私がそれらをしたいように流れたくないようです。

.resources-links { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
} 

.col-1of1 { 
    height: 25%; 
    display: flex; 
} 

Answer 1

心配しないでください：高さに影響を与えるためにしようと

私の主なCSSは、このようになります。 "高さ：25％;ディスプレイ：flex;"を削除し、 "フレックス：1;"を追加してください。

CSS：

この

.col-1of1 { 
    flex: 1; 
}