两个全高立柱，一个分成两堆，高度相同

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

是的，你可以使第二柔性项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/