CSS Flex佈局：非分層元素中的2列

Question

我想在2列中顯示「右」和「左」元素。正確的元素應該垂直延伸到父項的整個高度。標準解決方案爲每列使用一個額外的容器。但是，在我的情況下，這些列沒有語義含義，它們只是用於顯示。此外，由於我的項目會有許多這種結構的實例，因此添加容器元素會帶來很多混亂。

<div class='container'> 
    <div class='right'> 
    <div class='left'> 
    <div class='left'> 
    <div class='left'> 
    <div class='left'> 
</div> 

低估的「display：table-cell」幾乎可以工作，但有一定的侷限性，所以選項不存在。 CSS「display：flex」是我能想到的唯一的其他潛在解決方案。我找不到一個有效的例子，我的嘗試失敗了，所以我希望你能幫助我。先進的感謝，-T

Answer 1

display:flex是真棒，但瀏覽器支持可能是一個問題。 Flex guide。

下面是什麼問題？

Fiddle Link!

HTML

<div class="left">   
</div><!-- 
--><div class="right">  
</div> 

CSS

*, *:before, *:after { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 
html, body { 
    height: 100%; 
    width: 100%; 
    max-width: 500px; 
    min-width: 200px; 
    margin: 0 auto; 
} 
div { 
    display: inline-block; 
    height: 100%; 
} 
.left { 
    background: #F00; 
    width: 50%; 
} 
.right { 
    background: #000; 
    width: 50%; 
} 

Answer 2

內的柔性容器，其子可以垂直地或經由flex-direction水平（不同時）層疊。這就是爲什麼如果你想使用flexbox .left div應該包裝在一個包含父級。 .container兒童水平疊放，兒童垂直疊放。

這裏的小提琴：http://jsfiddle.net/7aK9f/1/。

這裏的HTML：

<div class = "container"> 
    <div class= "right">right</div> 
    <div class = "left"> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
     <div></div> 
    </div> 
</div> 

CSS：

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 

html, body { 
    height: 100%; 
} 

.container { 
    height: 100%; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: row; 
    flex-direction: row; 
} 

.container > .right { 
    order: 2; 
    background-color: #ccc; 
    -webkit-flex: 3 0 0; 
    flex: 3 0 0; 
} 

.container > .left { 
    order: 1; 
    background-color: #eee; 
    -webkit-flex: 7 0 0; 
    flex: 7 0 0; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-direction: column; 
    flex-direction: column; 
} 

.container > .left > * { 
    -webkit-flex: 1 0 0; 
    flex: 1 0 0; 
} 

.container > .left > div + div { 
    box-shadow: inset 0 1px 0 0px #000; 
}