My side-panel height is not expanding when my div content's get bigger. I've given the height to 100% it's working fine for mobile view but for the desktop view, sometimes my sidebar's height is not increasing as it's fixed. But I want this height to be dynamic with content of my div. This is my whole code : [JSFiddle](https://jsfiddle.net/mavis7/3e0qkb97/) 

Here you can see, if you click the navbar, it's open the bar, and down below you will see side-bar and div content are not in the same height. This is the problem I'm getting :

[![enter image description here](https://i.stack.imgur.com/oImHq.png)](https://i.stack.imgur.com/oImHq.png)

I want side bar to expand. How can I resolve this? All I can say that I've to change this css class's height but how ?:

```
.sidepanel {
    height: 100%; 
    width: 0; 
    position: absolute; 
    z-index: 1;
    left: 0;
    background-color: #221F20; 
    overflow-x: hidden; 
    padding-top: 40px; 
    transition: 0.3s;
}

```