css 父元素高度不固定子元素出现滚动条

背景:

要想实现这样的效果，父元素不固定，只有最大高度，让部分子元素内容超出后出现滚动条

解决方法：

父元素 display: flex; flex-direction: column;

子元素 overflow: auto;

代码如下：

<style>        
.father {            
    width: 300px;            
    display:flex;            
    flex-direction:column;            
    max-height: 200px;            
    background-color: pink;            
    overflow:hidden;        
}        
.child-wrap {            
    overflow: auto;        
}        
.child {            
    background: yellow;            
    height: 30px;        
}

</style>
<div class="father">        
    <div>1</div>        
    <div class="child-wrap">            
        <div class="child">2</div>            
        <div class="child">2</div>            
        <div class="child">2</div>            
        <div class="child">2</div>            
        <div class="child">2</div>            
        <div class="child">2</div>            
        <div class="child">2</div>            
        <div class="child">2</div>            
        <div class="child">2</div>       
    </div>        
    <div>3</div>
</div>