質問: html、cssでレイアウトの勉強をしているのですがflexの動作がよくわかりません。 例えば以下のようなコードがあります body抜粋 ``` ・・・・・・1 ・・・・・・2 aaa ``` ``` .full-size { width:100%; height:100%; } .flex-container { -webkit-box-flex: 1; -webkit-flex: 1 1 50%; flex: 1 1 50%; box-sizing: border-box; max-width: 50%; max-height: 100%; -webkit-box-direction: normal; -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; display: flex; } .margin-top10 { margin-top: 10%; } ``` ここからが質問なのですが、1の要素のflex-containerのmax-widthの%を増やすしていくと何故か2の要素でmargin-top: 10%と定義しているのにどんどんサイズが増えていきます。 なのでwidthを増やすと何故かどんどん縦のサイズも増えていってしまいます。 なぜでしょうか。 flex-containerのmax-width 50%の場合 ![](https://teratail.storage.googleapis.com/uploads/contributed_images/15c2eb1dd0f419d92c3f3f9862d3ca5f.png) flex-containerのmax-width 80%の場合 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/042ef847d2d529142b9072781276c6ab.png)
回答: 回答する前に言います。 クラス名が違っています。 に対して、CSSが.margin-top10 {}になっています。 ↑ 「top」の文字が有り無しになっています。 ここで本題に入ります。 > > 1の要素のflex-containerのmax-widthの%を増やすしていくと何故か2の要素でmargin-top: 10%と定義しているのにどんどんサイズが増えていきます。 > > なのでwidthを増やすと何故かどんどん縦のサイズも増えていってしまいます。 > > なぜでしょうか。 > > > これは、%で指定しているため、親要素から承継されます。 .full-size {}が100%で、.flex-container {}が最大値50%だと、 .full-size {}の幅の50%の幅になります。 従って、.full-size {}はブラウザの幅一杯の同じなので、見た目はブラウザの幅50%になります。 .full-size {}と、.flex-container {}に別々の背景色をつ付けて、ブラウザの幅を縮めたりして見ると分かります。