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
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es sei denn, Sie müssendass extra div, entfernen Sie es. Es ist manchmal ein Unterschied zwischen der Höhe eines Elements und dessen Länge entlang der Hauptachse (spaltenorientierung), die verursacht einige Verwirrung hier. Im Grunde ist es sieht wie es ist größer als der browser glaubt, es zu sein, das ist der Grund, warum
height: 100%
funktioniert nicht wie erwartet (ich bin mir nicht sicher, welches Verhalten richtig ist, in diesem Fall).Aus welchem Grund auch immer, die Förderung der das element zu einem flex-container funktioniert.
http://jsfiddle.net/MUrPj/14/
InformationsquelleAutor der Antwort cimmanon
Diese Frage wurde mit einer für ein bestimmtes problem: Wie man verschachtelte Elemente in einem flex-Feld füllen die ganze Höhe? Die kurze Antwort ist:
Verwenden
display:flex
auf das Kind und vermeidenheight:100%
. Hier ist ein Vereinfachtes Beispiel auf codepen.CourtDemone erklärt es gut (mehr hier):
InformationsquelleAutor der Antwort ldwg
Ich eine Lösung gefunden habe ohne das entfernen der extra-div.
Müssen Sie boxContent relativ positioniert und die box absolut.
Mit dem anbringen einer extra css-Klasse, um das innere div:
und folgenden css:
hier ist die aktualisierte jsfiddle: http://jsfiddle.net/MUrPj/223/
Diese Frage ist ziemlich alt, aber vielleicht hilfreich für zukünftige Besucher
InformationsquelleAutor der Antwort user3200478