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では機能しません。

使用する align-items: stretch

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

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

の代わりにalign-items、ストレッチしたいアイテムalign-selfだけで使用できます.flex-2-child。

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

私はあなたがすでにposition: absolute;不便だと言ったのを知っていますが、それはうまくいきます。サイズ変更の問題の修正について詳しくは、以下をご覧ください。

デモについては、このjsFiddleも参照してください。ただし、Webkitプレフィックスを追加しただけなので、Chromeで開きます。

基本的に2つの問題がありますが、これらは個別に扱います。

1. flex-itemの子を高さ100％で埋める
   • position: relative;子供の親に設定します。
   • position: absolute;子供に設定します。
   • その後、必要に応じて幅/高さを設定できます（サンプルでは100％）。
2. Chromeでサイズ変更のスクロールの「癖」を修正する
   • 入れoverflow-y: auto;スクロールのdivに。
   • スクロール可能なdivには、明示的な高さが指定されている必要があります。私のサンプルはすでに高さが100％ですが、適用されていない場合は指定できますheight: 0;

スクロールの問題の詳細については、この回答を参照してください。

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

その場合は、フレックスボックスを使用するようにflex-2を設定するだけです。

.flex-2 {
    display: flex;  
}

次にflex-2-childに柔軟になるように指示します。

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

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

その理由は、flex-2-childがflexboxアイテムではなく、その親であるからです。

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

明示的に設定するheight: 100%ことが可能正式にだけ設定するように、子の割合の高さを計算することが可能height: 100%にhtmlの割合の高さを計算することが可能となるbodyCSS2.1では。

私は自分で解決策を見つけました、以下の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;
}

アイデアがあることだろうdisplay:flex;とflex-direction: row;充填されたcontainerとのdivを.flex-1して.flex-2、それはそれは意味しない.flex-2デフォルトを持っているheight:100%;、それは完全な高さに拡張され、（子要素を持っている場合でも.flex-2-childして）height:100%;あなたは親に設定する必要がありますheight:100%;または使用を上のdivすぎ。display:flex;flex-direction: row;.flex-2

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

小さなデモは、からの高さを削除.flex-2-childし、使用display:flex;上.flex-2： http://jsfiddle.net/2ZDuE/3/

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/

これはalign-self: stretch;、引き伸ばしたい要素で解決することもできます。

場合によっては、フレックスボックス設定で1つのアイテムのみをストレッチすることが望ましいことがあります。

.container {
  height: 200px;
  width: 500px;
  display: flex;
  flex-direction: row;
}
.flex-1 {
  width: 100px;
  background-color: blue;
}
.flex-2 {
  position: relative;
  flex: 1;
  align-self: stretch;
  background-color: red;
}
.flex-2-child {
  background-color: green;
}

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

.container {。。。。align-items：ストレッチ; 。。。。}

これはcss +を使用した私のソリューションです

まず、最初の子（flex-1）を100pxにする必要がある場合は、フレックスにしないでください。では、CSS +実際には、あなたは柔軟性および/または静的要素（行または列）を設定することができ、あなたの例では、このように簡単のようになります：

<div class="container">
  <div class="EXTENDER">
    <div class="COLS">
      <div class="CELL _100px" style="background-color:blue">100px</div>
      <div class="CELL _FLEX" style="background-color:red">flex</div>
    </div>
  </div>
</div>

コンテナーcss：

.container {
    height: 200px;
    width: 500px;
    position:relative;
}

そして明らかにCSS + 0.2コアを含みます

フィドルを聞く