wie man verschachtelte flexboxes Arbeit

Habe ich ein kleines Beispiel für eine geschachtelte flexbox-setup: 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>

In diesem Beispiel gilt Folgendes:

  • CSS 'box' - Klassen verwenden flexbox-Eigenschaften, auf die nur die boxContent wird gesagt, um zu wachsen. Für bestimmte CSS-Eigenschaften und Werte, überprüfen Sie bitte die Geige.
  • 'fullSize' nur setzt sowohl Breite und Höhe auf 100%.

Wenn Sie diese Geigen mit Firefox und Chrome erhalten Sie unterschiedliche Ergebnisse. Im Firefox tut es das, was ich vermute, es hat damit zu tun, die der Dehnung der inneren .boxContent. In Chrome allerdings das innere .boxContent nicht gestreckt.

Würde jemand eine Idee, wie die Inhalte Strecken sich in Chrome wie auch ? vielleicht eine bestimmte webkit-Eigenschaft fehlt ?

InformationsquelleAutor der Frage Thomas | 2013-09-05

Schreibe einen Kommentar