Clever Geek Handbook

I want to add scrolling for a child div without setting the height when its parent div overflows

I want to add scrolling to the bottom child div when it overflows the parent. I don't want to set the height for the top and bottom div. it should calculate the remaining height from the parent and it should only show the scroll in the 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>
Run codeHide result


+3


source to share


1 answer


You can achieve this using flexbox:

  • Add display: flex;

    to#parent

  • Add flex-direction: column;

    to #parent

    to set direction
  • Add flex: 1;

    to #bottom

    to fill the right 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>
Run codeHide result


+3


source






More articles:


All Articles