Две колонки с полной высотой, одна из которых разделена на два стека с одинаковой высотой

Question

Существует одна колонка с левой стороны и одна с правой стороны. Эти столбцы имеют одинаковую высоту, созданный с Flexbox:

HTML

<div class="flex-container"> 
    <div class="left flex-item">Grounds rich pumpkin spice milk aftertaste doppio cream carajillo. Espresso body iced rich caramelization brewed sit organic crema. Qui grounds doppio wings ristretto barista cream brewed coffee aftertaste ristretto that. Froth americano, french press and dark java brewed.Grounds rich pumpkin spice milk aftertaste doppio cream carajillo. Espresso body iced rich caramelization brewed sit organic crema. Qui grounds doppio wings ristretto barista cream brewed coffee aftertaste ristretto that. Froth americano, french press and dark java brewed.</div> 
    <div class="right flex-item"> 
     <div class="stack stack-top">stack</div> 
     <div class="stack stack-below">stack</div> 
    </div> 
</div> 

CSS

.flex-container { 
    display: flex; 
} 

.flex-item { 
    flex: 1 0; 
} 

.left, .right, .stack { 
    border: 1px solid silver; 
} 

колонна на правой стороне должна быть разделена по вертикали на две стопки с одинаковой высотой (50%). Он должен быть динамически расположен к высоте столбца с левой стороны.

Есть ли способ сделать это с помощью flexbox и без использования высоты ? (Нет необходимости работать во всех браузерах)

JSFiddle

Answer 1

Да, вы можете сделать второй Flex перечислению а сам Flexbox, и изменить направление к колонку, а затем применить flex: 1 для дочерних элементов.

HTML (без изменений)

CSS

.flex-container { 
    display: flex; 
} 

.flex-item { 
    flex: 1 0; 
} 

.left, .right, .stack { 
    border: 1px solid silver; 
} 

.flex-container > div:nth-child(2) { 
    display: flex; 
    flex-direction: column; 
} 

.flex-container > div:nth-child(2) > div { 
    flex: 1; 
} 

DEMO: http://jsfiddle.net/ha0aqysk/