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:
HTML
- <main>
- <section id="left">
- <p>Left</p>
- </section>
- <section id="right">
- <div>
- <p>Right - First</p>
- </div>
- <div class="row">
- <article>
- <p>Lorem Ipsum</p>
- </article>
- <article>
- <p>Lorem Ipsum</p>
- </article>
- <article>
- <p>Lorem Ipsum</p>
- </article>
- </div>
- <div>
- <p>Right - Third</p>
- </div>
- <div>
- <p>Right - Fourth</p>
- </div>
- </section>
- </main>
CSS:
CSS
- html, body{
- height: 100%;
- margin: 0em;
- padding: 0em;
- }
- main{
- display: flex;
- flex-direction: row;
- }
- main section#left{
- flex-grow: 2;
- background-color: darkkhaki;
- align-items: stretch;
- }
- main section#right{
- display: flex;
- flex-direction: column;
- flex-grow: 3;
- }
- #right div{
- padding: 0em;
- margin: 0em;
- }
- main section#right div:first-child{
- background-color: darkorange;
- height: 30%;
- }
- main section#right div:nth-child(3){
- background-color: darkturquoise;
- height: 30%;
- }
- main section#right div:nth-child(4){
- background-color: dodgerblue;
- height: 10%;
- }
- main section#right div:nth-child(4) p{
- margin: 0em;
- }
- main section#right .row{
- display: flex;
- flex-direction: row;
- background-color: darkred;
- height: 30%;
- }
- main section#right .row article{
- width: 33.33%;
- border: 1px solid black;
- }