Flexbox的：事業部高度依賴於同級DIV

Question

我拿到包裹的包裝內的兩個div的，都具有動態的高度：

#wrapper { 
 
    display: flex; 
 
}

<div id="wrapper"> 
 
    <div id="left">dynamic content, height could be more or less than #right</div> 
 
    <div id="right">dynamic content, height could be more or less than #left</div> 
 
</div>

左格應始終對包裝的主導因素高度。有沒有辦法做到這一點純粹由CSS單獨？

列的寬度是已知的，我正在使用Bootstrap網格佈局。

我知道#wrapper div display: flex孩子div的高度相等。是否有一些屬性告訴瀏覽器#left高度始終是wrapper的高度，無論內容多少少於#right？我一直在通過the Complete Guide to Flexbox，但這樣的財產似乎不存在。

---

這裏的圖片，使我的問題更加清晰：

Answer 1

你可以用在右列中的內容到另一個DIV，並將其設置爲絕對定位，所以該高度列不會由內容決定。使用位置技巧和overflow: auto它將根據需要觸發滾動條。

jsFiddle

.wrapper { 
 
    display: flex; 
 
    width: 200px; 
 
} 
 
.left, 
 
.right { 
 
    outline: 1px solid red; 
 
    width: 50%; 
 
} 
 
.right { 
 
    position: relative; 
 
} 
 
.scrollable { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    overflow: auto; 
 
}

<div class="wrapper"> 
 
    <div class="left">left column with shorter content</div> 
 
    <div class="right"> 
 
    <div class="scrollable">dynamic content, height could be more or less than #left</div> 
 
    </div> 
 
</div> 
 

 
<hr> 
 

 
<div class="wrapper"> 
 
    <div class="left">left column with longer content alksjl alsdjike alidek alsdikk las dfiklwkjl iasdifielkjas d alsdjfi laskdfial asdielaf,.asdf</div> 
 
    <div class="right"> 
 
    <div class="scrollable">dynamic content, height could be more or less than #left</div> 
 
    </div> 
 
</div>