Flexbox設置最小高度，儘管內容的高度

Question

我有一個2列flexbox佈局。列中的項目使用flex:1，我只使用min-height設置它們的高度。這個想法是，兩列應該總是相等。當colA短於colB時，colA的子項伸展以填充可用高度。當colA比colB高時，colB的項目與它們的最小高度一樣高。

問題是，像往常一樣使用CSS，如果我有一個元素與min-height: 100px但填充內容是500px高，最小高度將永遠不會使用，有效最小高度將是內容（500px）。

現在的問題是：有沒有什麼方法可以使flex儘管其內容的高度使項目摺疊到最小高度？ 我有一個元素overflow-y:scroll; min-height: 100px。我想用一堆內容填充它，除非父列需要擴展，否則它不會擴展超過100像素的高度。

已更新，例如https://jsbin.com/gicirabufe/1/edit?html,css,output

Answer 1

更新

這裏是給你一個開始。

的scroll元素是必要的，以便能夠解決滾動您正在尋找（flex本身有一些缺陷使得這不可能沒有）

item2現在設置爲只使用盡可能多的空間，它的內容，並這是非常必要的，否則滾動將無法在item1上正確啓動。

我將min-height: 80px;增加爲item1，所以當item2中的內容變大時，它不會完全崩潰。玩那個min-height價值，以適應您的需求最好的。

html, body{ 
 
    height: 100%; 
 
} 
 
.flex{ 
 
    display: flex; 
 
} 
 
.left { 
 
    flex: 1; 
 
    min-height: 100px; 
 
    border: 1px solid black; 
 
} 
 
.right { 
 
    flex: 1; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.item1 { 
 
    flex: 1; 
 
    background: lime; 
 
    position: relative; 
 
    min-height: 80px; 
 
} 
 
.item2 { 
 
    flex: 0; 
 
    background: yellow; 
 
} 
 

 
.scroll { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: auto; 
 
}

<div class="flex"> 
 
    <div class="left"> 
 
    Bla<br> 
 
    Bla<br> 
 
    Bla<br> 
 
    Bla<br> 
 
    Bla<br> 
 
    Bla<br> 
 
    Bla<br> 
 
    Bla<br> 
 
    Bla<br> 
 
    Bla<br> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="item1"> 
 
     <div class="scroll"> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     </div> 
 
    </div> 
 
    <div class="item2"> 
 
     Bla 2<br> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<br> 
 

 
<div class="flex"> 
 
    <div class="left"> 
 
    Bla<br> 
 
    </div> 
 
    <div class="right"> 
 
    <div class="item1"> 
 
     <div class="scroll"> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     Bla 1<br> 
 
     </div> 
 
    </div> 
 
    <div class="item2"> 
 
     Bla 2<br> 
 
    </div> 
 
    </div> 
 
</div>