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

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

ただいまの
回答率

89.07%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 5,114

chonbo2525

score 235

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

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

<div class="main-container">
    <div class="header">
      Header
    </div>
    <div class="content">
      <div class="parent">
        <div class="child">
          CHILD
        </div>
      </div>
    </div>
    <div class="footer">
      Footer
    </div>
</div>
.main-container {
    background-color: black;
    height: 100%;
    display:flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    -webkit-align-content: stretch;
    align-content: stretch;
}
.header {
  min-height: 50px;
  background-color: red;
}
.content {
  -webkit-flex: 1;
  flex: 1;
  background-color: blue;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
}
.footer {
  min-height: 100px;
  background-color: green;
}
.parent {
  -webkit-flex: 1;
  flex: 1;
  background-color: yellow;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: center;
}
.child {
  min-height: 200px;
  background-color: pink;
}


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

宜しくお願い致します。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

flexでできますよ。

jsFiddleのサンプル

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

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

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

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

.main-container {
    background-color: black;
    min-height: 100vh;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    .header,
    .content,
    .parent,
    .child,
    .footer {
        flex: 1 100%;
    }
    .header {
        min-height: 50px;
        background-color: red;
    }
    .content {
        min-height: calc(100vh - (100px + 50px));
    }
    .footer {
        min-height: 100px;
        background-color: green;
    }
    .parent {
        background-color: yellow;
        min-height: calc(100vh - (100px + 50px));
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
    }
    .child {
        min-height: 200px;
        background-color: pink;
    }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/09 08:34

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

    キャンセル

0

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

/* 修正前のコード */ 
.content {
  background-color: blue;
  /*
  -webkit-flex: 1;
  flex: 1;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  */
}

html, body {
  height: 100%;
}
.main-container {
    background-color: black;
    height: 100%;
    display:flex;
    flex-direction: column;
    align-content: space-between;
}
.header {
    background-color: red;
    flex: 1 1 0;
    min-height: 50px;
}
.footer {
    background-color: green;
    flex: 1 1 0;
    min-height: 100px;
}

.parent {
    background-color: yellow;
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.child {
    background-color: pink;
    flex: 1 1 0;
    min-height: 200px;
}


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

<div class="main-container">
    <div class="header">
      Header
    </div>
    <div class="content">
      <div class="wrap">
        <div class="parent">
          <div class="child">
            CHILD
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      Footer
    </div>
</div>
/* 修正後のコード */
.main-container {
    background-color: black;
    display:flex;
    flex-direction: column;
    align-content: space-between;
}
.header {
    background-color: red;
    flex: 0 0 50px;
    height: 50px;
}
.content {
  background-color: blue;
  flex: 1 1 0;
  /*
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  */
}
.wrap {
  height: 100%;
}
.parent {
    align-items: center;
    background-color: yellow;
    display: flex;
    flex-direction: row;
    height: 100%;
    justify-content: center;
}
.child {
    background-color: pink;
    flex: 0 0 150px;
    height: 150px;
}
.footer {
    background-color: green;
    flex: 0 0 100px;
    height: 100px;
}

動くサンプル:https://jsfiddle.net/61rLuvq5/

【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

【CSS3のFlexboxを基本から理解して、使い倒そう! | 株式会社LIG】
http://liginc.co.jp/web/html-css/css/21024

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/06 00:19

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

    キャンセル

  • 2016/06/06 00:40

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

    キャンセル

  • 2016/06/06 00:56

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

    キャンセル

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る