兩個全高立柱，一個分成兩堆，高度相同

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/