CSS
height

flex-grow: 1な感じで作った不定の要素の高さを知る子要素を作りたい

More than 1 year has passed since last update.

なやみ

下みたいなflex-grow: 1で作った子要素を、親要素と同じ高さにしたい

Group.png

つらい

試しに子要素を height: 100% にしてみると、まぁそりゃ子要素見ちゃうよね

Group 3.png

じゃあ親要素を100%にすればいいじゃん、としても、その親の高さを見ちゃうのでflex-grow台無し。そんなに人生甘くない

Group 4.png

ここで子要素100%にしても残当な結果

Group 5.png

ひらめき

https://www.w3.org/TR/css-position-3/#valdef-position-absolute

The box’s position (and possibly size) is specified with the top, right, bottom, and left properties. These properties specify offsets with respect to the box’s containing block

position: relative / absolute の関係にすれば、子absoluteは包含するrelativeの座標系になるはず、じゃあ100%というのも親をとれる…?

Group 6.png

出来た

:tada:

サンプル ↓
https://codepen.io/anon/pen/zdwQRG

他にも

Thanks for @nanto_vi :clap:

コメントに貴重な知見頂いて、赤枠をflexboxにし、黄色にflex-grow: 1を適用することでも同等のスタイルを当てることができます!
確かに幾つかボックスを更に内側に並べるのであれば、このやり方のほうが賢い!かと思います。
ありがとうございます!