Flexbox с rowspan и фиксированным соотношением сторон

Question

Я надеюсь, что это можно сделать с помощью flexbox и не требовать (слишком много) обмана.

Что я ищу:

1) Один большой блок с двумя меньшими рядом с ней, что RowSpan, без необходимости иметь свой собственный вложенную обертку. Working Example

2) Процентная ширина, которая изменяется с фиксированным соотношением сторон, возможно, используя трюк прокладки. Это может быть определено только на большом блоке, на меньших или на обоих. Я говорю либо/или /, и потому, что мне все равно, что меньший блок соответствует соотношению сторон большего. Возможно, соотношение сторон может быть применено только к большему блоку, а меньшие - к высоте. Это было бы хорошо, если бы все они изменялись вместе по отношению к ширине контейнера. Working Example

Это последний бит, где я нахожусь на главном дорожном блоке. Первый пример с rowspan выглядит великолепно, но полагается на обертку с определенной высотой, которая нарушает отзывчивость. Когда я пытаюсь контролировать высоту блоков, а не обертку, все начинает разрушаться.

Вот мой нерабочим work in progress (или ниже)

Спасибо!

<div class="gallery"> 
    <div class="gallery-group"> 
     <div class="a"></div> 
     <div class="b"></div> 
     <div class="c"></div> 
    </div> 
</div> 

.gallery { 
    position: relative; 
    height: auto; 
    margin: 0 12%; 
    background-color: transparent; 
    display: flex; 
} 

.gallery-group { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 

    width: 100%; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    font-size: 0; 
    align-items: stretch; 
    flex-wrap: nowrap; 
} 

.a, .b { 
    flex: 0 0 50%; 
    align-self: flex-start; 
    width:30%; 
    padding-top:22%; 
} 

.c { 
    flex: 0 0 100%; 
    align-self: flex-end; 
    width:70%; 
    padding-top:50%; 
} 

Answer 1

Я думаю, что у меня это получилось, я изменил его размер и вне CodePen.io. Левая колонка всегда поддерживала 35% ширины и 50% высоты на зеленых и красных гибких предметах. В правой колонке поддерживалась ширина 65% и высота 100%. Посмотрите здесь:

CODEPEN

и тут из CodePen:

http://arcx.s3.amazonaws.com/x.html

CSS

.gallery { 
    position: fixed; 
    background-color: transparent; 
    display: flex; 
    width: 100vw; 
    height: 100vh; 
    flex-flow: column wrap; 

} 

.gallery-group { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: row; 
    align-self: stretch; 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 


.a, .b { 
    flex: 1 1 1%; 
    width: 35%; 
    height: 50%; 
    position: absolute; 
    left: 0px; 
} 

.a { top: 0px } 
.b { bottom: 0px } 

.c { 
    flex: 1 1 1%; 
    align-self: stretch; 
    width: 65%; 
    padding-top: 35%; 
    position: absolute; 
    top: 0px; 
    bottom: 0; 
    right: 0px; 
} 

.a { background: red; } 
.b { background: green; } 
.c { background: blue; }