I want to add scroll for child div without setting any height when its overflow the parent div

Question

I want to add scroll on bottom child div when its overflowing the parent. I don't want to set any height for both top and bottom div. it has to calculate the remaining height from parent and its should show the scroll only in bottom 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

You can achieve this using flexbox:

• Add display: flex; to #parent
• Add flex-direction: column; to #parent to set the direction
• Add flex: 1; to #bottom for it to take up the desired space

#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>