html - 当它溢出父 div 时，我想为子 div 添加滚动而不设置任何高度

Question

当它溢出父级时，我想在底部子级 div 上添加滚动。我不想为顶部和底部 div 设置任何高度。它必须计算父级的剩余高度，并且它应该只在底部 div 中显示滚动

#parent{
    height:100px;
    width:100px;
    border: 1px solid red;
}

#top{
    background-color: #CCC;
    width:100%;  
    height:auto
}

#bottom{
    height: auto;
    width: 100%;
    background-color: grey;
    overflow-y:auto;
}

<div id="parent">
    <div id="top">
        top content
        no need of scroll
    </div>
    <div id="bottom">
        I need scroll here when
        this content overflow the parent.        
    </div>
</div>

Answer 1

您可以使用 flexbox 实现此目的:

• 将display: flex;添加到#parent
• 在#parent中添加flex-direction: column;设置方向
• 将 flex: 1; 添加到 #bottom 以使其占用所需的空间

#parent{
    height:100px;
    width:100px;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}

#top{
    background-color: #CCC;
    width:100%;  
    height:auto
}

#bottom{
    height: auto;
    width: 100%;
    background-color: grey;
    overflow-y:auto;
    flex: 1;
}

<div id="parent">
    <div id="top">
        top content
        no need of scroll
    </div>
    <div id="bottom">
        I need scroll here when
        this content overflow the parent.        
    </div>
</div>