LoginSignup
5

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-08-21

なやみ

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

Group.png

つらい

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

Group 3.png

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

Group 4.png

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

Group 5.png

ひらめき

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を適用することでも同等のスタイルを当てることができます!
確かに幾つかボックスを更に内側に並べるのであれば、このやり方のほうが賢い!かと思います。
ありがとうございます!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5