27

ネストされたフレックスボックスのセットアップの小さな例があります: http://jsfiddle.net/ThomasSpiessens/MUrPj/12/

この例では、次のことが当てはまります。

  • CSS 'box' クラスは、boxContent のみが成長するように指示されたフレックスボックス プロパティを使用します。特定の CSS プロパティと値については、フィドルを確認してください。
  • 「fullSize」は、幅と高さの両方を 100% に設定するだけです。

このフィドルを Firefox と Chrome でチェックすると、異なる結果が得られます。Firefox では、内部の .boxContent を引き伸ばす必要があると私が推測することを行います。ただし、Chrome では、内部の .boxContent は引き伸ばされません。

Chromeでもコンテンツを伸ばす方法を知っている人はいますか? おそらく、欠落している特定の Webkit プロパティですか?

.fullSize {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.box {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  background-color: brown;
}


/* line 7, ../../app/styles/_layout.scss */

.boxHeader {
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  background-color: green;
}


/* line 12, ../../app/styles/_layout.scss */

.boxContent {
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto;
  -webkit-box-flex: 1.0;
  background-color: yellow;
}


/* line 18, ../../app/styles/_layout.scss */

.boxFooter {
  -ms-flex: 0 1 auto;
  -webkit-flex: 0 1 auto;
  flex: 0 1 auto;
  background-color: cornflowerblue;
}

.moreblue {
  background-color: blue;
}

.moregreen {
  background-color: darkgreen;
}

.red {
  background-color: red;
}
<div class="box fullSize">
  <div class="boxHeader">HEADER</div>
  <div class="boxContent">
    <div class="box fullSize">
      <div class="boxHeader moregreen">INNER HEADER</div>
      <div class="boxContent red">CONTENT CONTENT CONTENT</div>
      <div class="boxFooter moreblue">INNER FOOTER</div>
    </div>
  </div>
  <div class="boxFooter">FOOTER</div>
</div>

4

5 に答える 5

14

この質問は、特定の問題にリンクされています:フレックスボックス内のネストされた要素を高さ全体に埋める方法は? 簡単な答えは次のとおりです。

お子様への使用display:flexは避けてくださいheight:100%。これはcodepenの簡単な例です。

CourtDemoneはそれをうまく説明しました (詳細はこちら):

フレックスボックスの仕様によると、align-self:stretch値 (フレックス要素のデフォルト)は、要素の cross-size プロパティ (この場合は高さ)の使用値のみを変更します。ただし、パーセンテージは、使用された値ではなく、親の cross-size プロパティの指定された値から計算されます。

于 2016-03-08T13:59:21.260 に答える