web-dev-qa-db-ja.com

ネストされたフレックスボックスを機能させる方法

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

<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>

この例では、次が適用されます。

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

このフィドルをFirefoxとChromeでチェックすると、異なる結果が得られます。 Firefoxでは、それがやらなければならないと思うことを行います。これは、内部の.boxContentを引き伸ばします。ただし、Chromeでは、内側の.boxContentは引き伸ばされません。

Chromeでもコンテンツを拡大する方法を考えている人はいますか？おそらく特定のwebkitプロパティが欠落していますか？

cssgoogle-chromehtmlflexbox
21
Thomas

その余分なdivをneedしない限り、削除します。要素の高さとmain axis（列の向き）に沿った要素の長さとの間に違いがある場合があり、混乱を引き起こしています。基本的に、looksブラウザーが信じているよりも高いように見えるため、height: 100%は期待どおりに動作しません（この場合、どの動作が正しいかはわかりません）。

何らかの理由で、要素をflex containerに昇格させます。

http://jsfiddle.net/MUrPj/14/

<div class="box fullSize">
    <div class="boxHeader">HEADER</div>
    <div class="boxContent box">
        <div class="boxHeader moregreen">INNER HEADER</div>
        <div class="boxContent red">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT</div>
        <div class="boxFooter moreblue">INNER FOOTER</div>
    </div>
    <div class="boxFooter">FOOTER</div>
</div>
19
cimmanon

この質問は特定の問題にリンクされています：フレックスボックス内のネストされた要素を高さ全体に埋める方法は？簡単な答えは：

使用する display:flex子に対してheight:100%。 codepenの簡単な例 です。

CourtDemone それをうまく説明しました（詳細 ここ ）：

flexbox仕様、align-self:stretch value（flex'd要素のデフォルト）は、要素のクロスサイズプロパティ（この場合、高さ）のused値のみを変更します。ただし、パーセンテージは、使用されている値ではなく、親のクロスサイズプロパティのspecified値から計算されます。

13
ldwg

私は余分なdivを削除せずに解決策を見つけました。

BoxContentを相対的な位置に配置し、それを含むボックスを絶対にする必要があります。

内側のdivに追加のcssクラスを追加すると：

<div class="boxContent">
    <div class="box fullSize innerBox">

そして、次のCSS：

.boxContent {
  ...
    position: relative;
}
.innerBox{
    position: absolute;
    top: 0px;
    bottom: 0px;
}

更新されたjsfiddleは次のとおりです。 http://jsfiddle.net/MUrPj/223/

この質問はかなり古いですが、これは将来の訪問者に役立つかもしれません

3
user3200478