Flexbox Layout mit zwei Elementen auf der linken und einer auf der rechten Seite

Question

Ich versuche, das folgende Layout mit Flexbox zu erreichen.

┌─┬─────┐ 
│A│  │ 
├─┤ C │ 
│B│  │ 
└─┴─────┘ 

Ist es möglich, dies zu tun, ohne A und B in einen Wrapper zu wickeln?

Answer 1

Ja, es ist möglich. Beachten Sie, dass in diesem Beispiel der Hauptbehälter eine feste Breite und Höhe hat.

#container{ 
 
    height: 200px; 
 
    width: 300px; 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
} 
 

 
#container, #A, #B, #C{ 
 
    box-sizing: border-box; 
 
    border: 1px solid black; 
 
} 
 

 
#A{ 
 
    height: 50%; 
 
    width: 100px; 
 
} 
 

 
#B{ 
 
    height: 50%; 
 
    width: 100px; 
 
} 
 

 
#C{ 
 
    height: 100%; 
 
    width: 200px; 
 
}

<div id="container"> 
 
    <div id="A">A</div> 
 
    <div id="B">B</div> 
 
    <div id="C">C</div> 
 
</div>

Answer 2

leider gibt es keine feste Höhe, so dass ich am Ende mit Dingen alte Art und Weise zu tun - über Tabellen, wie dieser

HTML:

<div id="container"> 
    <div id="A">A<br>AAA<br>BBB</div> 
    <div id="B">B</div> 
    <div id="C">C</div> 
</div> 

CSS :

#container { 
    width: 100%; 
    outline: 1px solid black; 
    display: table; 
} 

#A,#B,#C { 
    outline: 1px solid crimson; 
} 

#A,#B { 
    width: 100%; 
} 

#C { 
    display: table-cell; 
    vertical-align: middle; 
    width: 50%; 
}