質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

7236閲覧

Flexboxのflex: 1の高さに孫要素の高さを合わせたい

chonbo2525

総合スコア233

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

1クリップ

投稿2016/06/05 01:59

お世話になっております。

現在CSS Flexboxを利用してレイアウトを構成しているのですが、Flex ContainerにFlex Itemを配置し、
Header, Content, Footerの子要素を配置し、Content内に孫要素を配置しています。

html

1<div class="main-container"> 2 <div class="header"> 3 Header 4 </div> 5 <div class="content"> 6 <div class="parent"> 7 <div class="child"> 8 CHILD 9 </div> 10 </div> 11 </div> 12 <div class="footer"> 13 Footer 14 </div> 15</div>

css

1.main-container { 2 background-color: black; 3 height: 100%; 4 display:flex; 5 display: -webkit-flex; 6 flex-direction: column; 7 -webkit-flex-direction: column; 8 -webkit-align-content: stretch; 9 align-content: stretch; 10} 11.header { 12 min-height: 50px; 13 background-color: red; 14} 15.content { 16 -webkit-flex: 1; 17 flex: 1; 18 background-color: blue; 19 display: flex; 20 display: -webkit-flex; 21 flex-direction: column; 22 -webkit-flex-direction: column; 23} 24.footer { 25 min-height: 100px; 26 background-color: green; 27} 28.parent { 29 -webkit-flex: 1; 30 flex: 1; 31 background-color: yellow; 32 display: flex; 33 display: -webkit-flex; 34 flex-direction: column; 35 -webkit-flex-direction: column; 36 justify-content: center; 37} 38.child { 39 min-height: 200px; 40 background-color: pink; 41}

完成イメージはこのようなイメージです。
レイアウト
しかし、このようにレイアウトはできるのですが、ブラウザサイズを縮めると
レイアウト
のようにHeaderを押しつぶしてしまうようです。
ここまで縮められることはないと言って割り切ることはできるのですが、この挙動がどうしても納得いかず、
どうしてこうなるのか知りたくて投稿致しました。

宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

flexでできますよ。

jsFiddleのサンプル

ただ質問のcssだけではムリです。それは100% = 画面の高さではないということで、高さのない部分には100vhからheaderとfooterの高さを引いたものを最低の高さとして入れてます。

またflexのcolumnはまだ色々とあるみたいなので、どうせ縦並びで良いのであれば flex: 1 100%にしたら勝手に折り返すんですから、rowで並べたら良いと思います。

ベンダープレフィックスは入れてないのでcodepenなり、手元のコンパイル環境で自動で入れて下さい。

あ、cssで書いたんだった。
うーむ、scssはこんな感じです。プロパティは並びグチャグチャですけど、まぁそこらは許して下さい。

scss

1.main-container { 2 background-color: black; 3 min-height: 100vh; 4 display: flex; 5 flex-flow: row wrap; 6 justify-content: space-between; 7 .header, 8 .content, 9 .parent, 10 .child, 11 .footer { 12 flex: 1 100%; 13 } 14 .header { 15 min-height: 50px; 16 background-color: red; 17 } 18 .content { 19 min-height: calc(100vh - (100px + 50px)); 20 } 21 .footer { 22 min-height: 100px; 23 background-color: green; 24 } 25 .parent { 26 background-color: yellow; 27 min-height: calc(100vh - (100px + 50px)); 28 display: flex; 29 flex-flow: row wrap; 30 justify-content: space-between; 31 align-items: center; 32 } 33 .child { 34 min-height: 200px; 35 background-color: pink; 36 } 37}

投稿2016/06/08 23:29

編集2016/06/08 23:30
hidekichi

総合スコア366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hidekichi

2016/06/08 23:34

vhはもしかすると一部環境で動作しないかも知れません。 safariとか、モバイルsafariとか(笑) ieはもうどうでも良いですし、vhが使えない場合は、contentとparentの高さをなんとかして出したい所です。
guest

0

display: flex の子要素には display: flex を設定できないと思います。また、display: flexflex: 1 は同時に設定しないほうがよさそうです。

CSS

1/* 修正前のコード */ 2.content { 3 background-color: blue; 4 /* 5 -webkit-flex: 1; 6 flex: 1; 7 display: flex; 8 display: -webkit-flex; 9 flex-direction: column; 10 -webkit-flex-direction: column; 11 */ 12} 13 14html, body { 15 height: 100%; 16} 17.main-container { 18 background-color: black; 19 height: 100%; 20 display:flex; 21 flex-direction: column; 22 align-content: space-between; 23} 24.header { 25 background-color: red; 26 flex: 1 1 0; 27 min-height: 50px; 28} 29.footer { 30 background-color: green; 31 flex: 1 1 0; 32 min-height: 100px; 33} 34 35.parent { 36 background-color: yellow; 37 display: flex; 38 flex-direction: row; 39 justify-content: center; 40} 41.child { 42 background-color: pink; 43 flex: 1 1 0; 44 min-height: 200px; 45}


いくつかミスがあったので修正しました。

HTML

1<div class="main-container"> 2 <div class="header"> 3 Header 4 </div> 5 <div class="content"> 6 <div class="wrap"> 7 <div class="parent"> 8 <div class="child"> 9 CHILD 10 </div> 11 </div> 12 </div> 13 </div> 14 <div class="footer"> 15 Footer 16 </div> 17</div>

CSS

1/* 修正後のコード */ 2.main-container { 3 background-color: black; 4 display:flex; 5 flex-direction: column; 6 align-content: space-between; 7} 8.header { 9 background-color: red; 10 flex: 0 0 50px; 11 height: 50px; 12} 13.content { 14 background-color: blue; 15 flex: 1 1 0; 16 /* 17 display: flex; 18 display: -webkit-flex; 19 flex-direction: column; 20 -webkit-flex-direction: column; 21 */ 22} 23.wrap { 24 height: 100%; 25} 26.parent { 27 align-items: center; 28 background-color: yellow; 29 display: flex; 30 flex-direction: row; 31 height: 100%; 32 justify-content: center; 33} 34.child { 35 background-color: pink; 36 flex: 0 0 150px; 37 height: 150px; 38} 39.footer { 40 background-color: green; 41 flex: 0 0 100px; 42 height: 100px; 43} 44```**動くサンプル:**[https://jsfiddle.net/61rLuvq5/](https://jsfiddle.net/61rLuvq5/) 45 46【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】 47[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html) 48 49【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】 50[http://liginc.co.jp/web/html-css/css/21024](http://liginc.co.jp/web/html-css/css/21024)

投稿2016/06/05 12:17

編集2016/06/05 15:58
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

chonbo2525

2016/06/05 15:19

早速のコメントありがとうございます。とても参考になりました。 頂いたサンプルを早速試してみたのですが、HeaderとFooterは高さを固定したいと考えています。 親(content)にflex: 1 1 0;を設定された場合、子(parent)が親の高さに合わせる方法を現在模索中です。 contentとparentが同じ高さを持ち、可変であり、parent内のchildを上下中央に配置したいと考えています。 parentの高さは縮められた場合、childの高さで固定される(parentのmin-heightがchildの高さ)イメージです。
kei344

2016/06/05 15:40

すいません、サンプルのリンクが適切でなかったので、掲載しなおします。一応「HeaderとFooterは高さを固定」が出来ています。
kei344

2016/06/05 15:56

追記しました。.parent を包む .wrap という要素をHTMLに追加しています。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問