2 rozloženie stĺpcov s 1 kontajnerom s pomerom strán a celkovou výškou div - html, css

Snažím sa vytvoriť rozloženie s 2 stĺpcami, s jedným stĺpcom širokým 2/3 a druhým 1/3.

Prvý stĺpec by mal byť zachytený video kontajnerom, ktorý udržuje pomer strán 4: 3. Myslím, že som to urobil správne nastavením výplne video kontajnera na 75%.

Bol by som rád, keby tretí stĺpec obsahoval prvok, ktorý sa rozširuje do celej výšky riadku. Zdá sa, že nie je schopný.

Chcel som sa len opýtať, či to bolo preto, žerozloženie stĺpcov získava svoju výšku z video kontajnera (ktorý je zase založený na jeho šírke)? Alebo som jednoducho prehliadol niečo jednoduché? Rád by som prestal náhodne pridávať „výšku: 100%“ do všetkého, čo je vo vágnej nádeji že to funguje a skutočne rozumiem tomu, čo mi chýba!

<div class="container">
<div class="row">
<div class="col-2-of-3">
<div class="video-container">
<div class="video">Column Containing 4:3 Video</div>
</div>
</div>
<div class="col-1-of-3">
<div class="full-height-div">
Div in column 2
</div>
</div>
</div>
</div>

css

.container {
border: 1px dotted red;
}

.row {
background: #aeaeae;
width: 100%;
height: 100%;
}
.row::after {
content: "";
display: table;
clear: both;
}

[class^="col-"] {
height: 100%;
float: left;
}
[class^="col-"]:not(:last-child) {
margin-right: 10px;
}

.col-1-of-3 {
width: calc((100% - 2 * 10px}) / 3);
}

.col-2-of-3 {
width: calc(((100% - 2 * 10px) / 3) * 2 + 10px);
}

.video-container {
height: 0;
overflow: hidden;
padding-top: 75%;
position: relative;
width: 100%;
}

.video {
background: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
}

.full-height-div {
max-width: 100%;
height: 100%;
border: 1px dotted #fff;
}

codepen: https://codepen.io/anon/pen/jxzMag?editors=1100

odpovede:

Na vytvorenie rozloženia môžete použiť flexbox namiesto plavákov: Kompletný sprievodca Flexboxom

V predvolenom nastavení sú prvky v rozložení riadku flex roztiahnuté na 100% výšky riadku

Príklad: https://codepen.io/anon/pen/gzzvyO

.container{
border: 1px dotted red;
}

.row{
background: #aeaeae;
display: flex;
}

.col-2-of-3{
width: 67%;
flex-grow: 0;
}

.col-1-of-3{
flex-grow: 1;
margin-left: 10px;
}

.video-container {
height: 0;
overflow: hidden;
padding-top: 75%;
position: relative;
width: 100%;
}

.video{
background: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
}

.full-height-div{
height: 100%;
border: 1px dotted #fff;
}