web-dev-qa-db-ja.com

どのようにflexboxの子供たちを彼らの親の100％の高さにするには？

フレックスボックス内のフレックスアイテムの垂直方向のスペースを埋めるようにしています。

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  background-color: red;
}
.flex-2-child {
  height: 100%;
  width: 100%;
  background-color: green;
}
<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

そしてこれが JSFiddle です。

flex-2-childは、次の2つの場合を除いて、必要な高さを満たしません。

  1. flex-2の高さは100％です（デフォルトではフレックスアイテムの100％になっているため、これは奇妙です+ Chromeではバグがあります）。
  2. flex-2-childは絶対位置を持っていますが、これも不便です

現時点では、これはChromeまたはFirefoxでは機能しません。

csscss3flexbox
342
Raz

私は同様の質問に答えました here 。

position: absolute;は不便だとすでに言っていますが、うまくいきます。サイズ変更の問題の修正に関する詳細については、以下を参照してください。

私はChromeで公開されているWebKitプレフィックスを追加しただけですが、デモのためにこれ jsFiddle も見てください。

あなたは基本的に2つの問題を抱えています。

  1. フレックスアイテムの子を全高100％にする
    • 子の親にposition: relative;を設定します。
    • 子にposition: absolute;を設定します。
    • その後、必要に応じて幅/高さを設定できます（私のサンプルでは100％）。
  2. Chromeでのサイズ変更スクロールの "奇妙な"修正
    • スクロール可能なdivにoverflow-y: auto;を置きます。
    • スクロール可能divには、明示的な高さを指定しなければなりません。私のサンプルはすでに高さ100％ですが、まだ適用されていない場合はheight: 0;を指定できます

スクロールの問題についての詳細は answer をご覧ください。

250
Brett Postin

私が正しく理解しているならば、あなたはflex-2-childがその親の高さと幅を満たすようにしたいでしょう、それで赤い領域は完全に緑で覆われますか？

もしそうなら、flexboxを使うようにflex-2を設定する必要があります。

.flex-2 {
    display: flex;  
}

次にflex-2-childに柔軟になるように伝えます。

.flex-2-child {    
    flex: 1;
}

http://jsfiddle.net/2ZDuE/10/を参照してください /

その理由は、flex-2-childはflexboxの項目ではなく、その親がであることです。

195
David Storey

David Storeyの答えと同様に、私の回避策は次のとおりです。

.flex-2
{
 align-items: stretch;
 display: flex;
}

align-itemsの代わりに、ストレッチしたいalign-self項目に.flex-2-childを使用することもできます。

91
B T

Chromeの動作はCSSの仕様とより一貫していると思います（ただし直感的にはわかりません）。 Flexboxの仕様によると、align-self property のデフォルトのstretch値は、要素の「クロスサイズプロパティ」の used value のみを変更します（この場合はheight）。そして、私が CSS2.1の仕様 を理解しているように、パーセンテージの高さは、その使用された値ではなく、親のheightの 指定 の値から計算されます。指定された親のheightの値はどのflexプロパティにも影響されず、依然としてautoです。

明示的にheight: 100%を設定すると、 formally になり、CSS2.1でhtmlのパーセンテージ高さを計算できるようにheight: 100%をbodyに設定するのと同じようになります。

21
Ilya Streltsyn

私は自分で解決策を見つけました、あなたが以下のCSSを持っていると仮定します：

.parent {
  align-items: center;
  display: flex;
  justify-content: center;
}

.child {
  height: 100%; <- didn't work
}

この場合、高さを100％に設定してもうまくいきませんので、margin-bottomルールをautoに設定します。

.child {
  margin-bottom: auto;
}

そして、子は親の一番上に配置されます。望むなら、align-selfルールを使用することもできます。

.child {
  align-self: flex-start;
}
7
user3896501

display:flex;を含むflex-direction: row;が.flex-1および.flex-2でcontainer divを埋めていると考えられますが、それは、フルハイトに拡張され、.flex-2 you 'を持つ子エレメント（height:100%;）がある場合でも、.flex-2-childがデフォルトのheight:100%;であることを意味しません。親をheight:100%;に設定するか、display:flex; divでもflex-direction: row;と共に.flex-2を使用する必要があります。

私が知っていることから、display:flexはすべての子要素の高さを100％に拡張するわけではありません。

小さなデモで、.flex-2-childから高さを取り除き、display:flex;で.flex-2を使いました： http://jsfiddle.net/2ZDuE/3/

4
rmagnum2002

html 

<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

css 

.container {
    height: 200px;
    width: 500px;
    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex-1 {
   flex:1 0 100px;
    background-color: blue;
}
.flex-2 {
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1 0 100%;
    background-color: red;
}
.flex-2-child {
    flex: 1 0 100%;
    height:100%;
    background-color: green;
}

http://jsfiddle.net/2ZDuE/750/

3
Carol McKay