676

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

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

4

12 に答える 12

564

使用するalign-items: stretch

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

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

子コンポーネントから削除する必要があることに注意してheight: 100%ください (コメントを参照)。

の代わりに、伸ばしたい部分だけにalign-items使用することもできます。align-self.flex-2-child

于 2015-09-08T20:04:03.010 に答える
286

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

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

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

基本的に、私が別々に扱う2つの問題があります。

  1. フレックスアイテムの子を高さを100％満たすようにする
  • position: relative;子の親に設定します。
  • position: absolute;子供に設定します。
  • 次に、必要に応じて幅/高さを設定できます（私のサンプルでは100％）。
  1. Chromeのサイズ変更スクロールの「癖」を修正
  • overflow-y: auto;スクロール可能なdivを配置します。
  • スクロール可能なdivには、明示的な高さを指定する必要があります。私のサンプルの高さはすでに100％ですが、まだ適用されていない場合は、指定できますheight: 0;

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

于 2013-03-13T15:29:26.483 に答える
253

私の理解が正しければ、赤い領域が緑で完全に覆われるように、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 アイテムではなく、その親であるためです。

于 2013-05-27T10:38:08.603 に答える
27

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

を明示的に設定するheight: 100%と、子の高さのパーセンテージを正式に計算できるようになります。これは、CSS 2.1で を設定height: 100%するhtmlと高さのパーセンテージを計算できるようにするのと同じです。body

于 2013-09-18T08:08:27.323 に答える
5 

.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;
}
<div class="container">
    <div class="flex-1"></div>
    <div class="flex-2">
        <div class="flex-2-child"></div>
    </div>
</div>

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

于 2016-01-17T11:13:12.500 に答える
4

display:flex;withはdiv をandでflex-direction: row;埋めているという考えがありますが、それは、たとえそれが全高に拡張されたとしても、それがdefault を持っているという意味ではありません。container.flex-1.flex-2.flex-2height:100%;

また、子要素 ( .flex-2-child) を持つheight:100%;には、親を に設定するか、divで withをheight:100%;使用する必要があります。display:flex;flex-direction: row;.flex-2

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

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

于 2013-03-13T09:54:47.447 に答える
2

豆知識: 最新のクロムでは height-100% が機能します。サファリではありません。

したがって、追い風での解決策は

「フレックスアイテム-ストレッチ」

https://tailwindcss.com/docs/align-items

子の子の子に再帰的に適用される...

于 2021-02-09T08:17:27.400 に答える