web-dev-qa-db-ja.com

flexbox列の子の高さ100％

Flex_d要素の子がheightにパーセンテージで応答しないという点で、flexbox列に問題があります。これはChromeでしか確認していませんが、私が理解しているのはChromeのみの問題です。これが私の例です。

HTML

<div class='flexbox'>
  <div class='flex'>
    <div class='flex-child'></div>
  </div>
  <div class='static'></div>
</div>

CSS

.flexbox{
  position:absolute;
  background:black;
  width:100%;
  height:100%;

  display: flex;
  flex-direction:column;
}

.flex{
  background:blue;
  flex:1;
}

.flex-child{
  background:red;
  height:100%;
  width:100%;
  display:block;
}

.static{
  background:green;
  width:100%;
  height:5rem;
}

これがCodePenです。

赤い.flex-childが青い.flexを満たすようにしたいのです。 height:100%が機能しないのはなぜですか？

cssgoogle-chromeheightpercentageflexbox
77
CourtDemone

TL; DR：.flexをdisplay:flexに設定し、height:100%上の.flex-childを削除します_。 変更されたCodePenはこちらで確認できます

それが機能する理由：

この同様の質問 から学んだのは、flexbox仕様に従って、align-self:stretch値（flex'd要素のデフォルト）は要素のクロスサイズプロパティの使用値（この場合、height）。ただし、パーセンテージは、使用された値ではなく、親のクロスサイズプロパティの指定値から計算されます。インスペクタをクラックして開き、「スタイル」の下にheight:100%があり、「計算済み」の下にheight:1200pxが表示されている場合、specifiedおよびused値。

この点で、Chromeは仕様に従っているようです。つまり、height:100%に.flex-childを設定すると、.flexの指定されたheightの100％を意味します。 .flexでheightを指定していないため、デフォルトのheightであるautoの100％を取得しています。レイアウトエンジンが混乱している理由をご覧ください。

.flexをdisplay:flexに設定し、height:100%を.flex-childから削除すると（autoの100％を設定しようとしないように）.flex-child.flexをすべて埋める

これが機能しない場合：

.flexの一部のみを入力しようとしている場合、これは機能しません。 .flex-childをheight:90%に設定しようとしています。子を曲げると、利用可能なすべてのスペースがいっぱいになるためです。私はあなたが絶対位置でそれをハッキングできるかもしれないと思ったが、それもうまくいかないようだ。 .flexと呼ぶ.spacerに2番目の子を追加し、.spacerをflex:1に、.flex-childをflex:9に設定することにより、ハッキングできます。 （必ずflex-direction:columnにも.flexを設定してください）。ハックですが、修正できる唯一の方法です。 これがCodePenです。

願わくば、これに頼り続ける必要はなく、期待通りに機能するように仕様を変更するだけです。

109
CourtDemone