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>