Kraft flexbox-element nicht zu nehmen alle vertikalen Raum
TL;DR: flex-element mit flex-direction: row nimmt alle vertikalen Raum und verhindert, dass die scrollbar in seiner Kind.
Den erste Geige zeigt, welche Art von Benutzeroberfläche würde ich gerne erreichen: es ist eine Seite, die erstreckt sich um den gesamten Bildschirm, sowohl horizontal als auch vertikal. Es enthält einen header und einen main <div>, das ist eine scrollbare Liste von Elementen. Der container ist somit ein column flexbox. Beachten Sie, dass es Breite und Höhe sind genau richtig.
Nun möchte ich, um eine Seitenleiste hinzufügen, um die wichtigsten Inhalte und flexbox scheint perfekt zu sein für diese als gut. Ich habe einfach eine weitere hinzufügen <div id='main'> mit flex-direction: row: siehe die zweite Geige. Die sidebar angezeigt in Ordnung, aber hier ist ein problem. Die neue <div id='main'> nimmt alle vertikalen Raum, als Folge, die Elemente, die Liste wird nie eine scrollbar.
Habe ich versucht, Begrenzung der Höhe <div id='main'> und es scheint zu funktionieren. Aber es ist ziemlich unbequem in Bezug auf code, da der header ein separates Bauteil ist, so ist im Allgemeinen seine Körpergröße ist unbekannt zu der wichtigsten Komponente, und ich habe es berechnet, bevor Sie height: calc(100vh - ...).
Ist es eine Reine CSS-Dateien Weg, zu sagen, ein flexbox container nicht zu wachsen vertikal? Oder soll ich wieder zum guten alten html-Tabelle?
overflow-y: auto; zu main zeigt die Bildlaufleiste. Ist es das, was Sie sind, nach? Entschuldigt, wenn ich es verpasst habe die Marke hier.Ihre
#container hat overflow hidden. Ihre .items hat die Höhe sollte es haben (alle Elemente), aber #containers overflow hidden schneidet es. Das bedeutet, dass Sie in der Höhe zu verändern .Artikelnicht für mich arbeiten
InformationsquelleAutor Maxim | 2018-01-10