Positionierung mit Flexbox

  • Hey,


    ich habe folgendes Layout mit Flexbox erstellt:flex.PNG


    Nun füllen die ganzen Container bei einer Höhe von 100% nur 1/4 der ganzen Website. Wenn ich dem linken Container eine Höhe von 100% zuweise, wird dieser sogar nur so groß dargestellt wie der erste Container rechts.


    Wie kann das sein? & Wie kann ich die ganzen Container auf die komplette Höhe strecken?


    Hier ist der Code:


    HTML:

    CSS:

  • Zitat

    Wie kann das sein? & Wie kann ich die ganzen Container auf die komplette Höhe strecken?

    Du hast zwar html und body auf die volle Höhe gestreckt, aber was fehlt ist eine Anweisung, die dem main-Container sagt, dass er die volle Höhe ausfüllen soll:

    Code
    1. main {
    2. display: flex;
    3. flex-direction: row;
    4. height: 100%;
    5. }

    Davon abgesehen ist IMO ist der main-Container überflüssig, denn body ist für Styling nicht tabu. Außerdem wäre es konsequent, statt der Maße in Prozent die Flex-Anweisungen zu verwenden. Dann könnte das CSS so aussehen: