Stretching a div height and filling all empty space

[Bratatat]

How can i stretch the height of the sidebar div? I tried using min-height :100% but it creates more space and white space.

.sideBar{
    width: 300px;
    max-width: 300px;   
    position: absolute;
    top: 0px;
    bottom: 0px;        
    background-color: #121214;     
    z-index: 9999;
   display: flex;
   flex-direction: column;

}

.sideBar .sideBarWrapper{
    position: relative;    
    height: 100%;    
    flex: 1;
    display: flex;
    align-items: flex-end;
}

[DanCouper]

That child of the sidebar has been given a height of 100%: 100% of what? The sidebar has no height specified.

[Bratatat]

Thanks for the help. I just set the position to fixed and set the scrollbar to overflow-y:auto

[DanCouper]

it’s a really common issue, and the solution (add a height to parent) is quite context-sensitive, it depends on what you need for a specific situation. There is a common assumption that applying 100% height will push an element to the full height of whatever its parent element is. The thing is, the browser needs to know explicitly what the height of the parent element is (then if the parent is 100%, need to know what the height of the grandparent is and so on).