Inline verticall scrollbar

Hi, I have changed Gentelella HTML theme (https://colorlib.com/polygon/gentelella/plain_page.html). The customized version is here:
http://1geeky.ir/test/production/plain_page.html

The issue is

1. the whole site (body) has a vertical scrollbar
2. I need a vertical scrollbar for the middle portion of the page (The div with the .inner-left-container class); but when I add overflow-y: scroll;, it will scroll an extra height which exceeds screen's height.

Also if you see the left side-bar, it does not scroll despite it has elements hidden at the end of its bottom. How could I restore the scrolling feature for the sidebar like what is here? :
https://colorlib.com/polygon/gentelella/fixed_sidebar.html

Thanks

 

Don't set heights on elements unless you have compelling reason, in this case, you want a limited height on the aggregate middle column.

.inner-left {
  border-right: 1px solid #d8d8d8;
  float: left;
  height: 50%;   <<<< limit the height
  overflow: auto;
  padding: 0 10px;
  width: 75%;
}

Code (markup):

Delete the height property on the chart class. It creates a faux overflow condition equal to the height of the middle column.

I see no reason to scroll individual elements on this page.

gary

 

Thank you Gary
I limited the height of .inner-left to 50% and removed height property on .charts but the scrollbar of body and the whole page remains.
After all, I set the height of the middle column 100% because I want its right border stretch to the bottom of the window.

Do you have any idea about sidebar vertical scrolling? :

I really appreciate your help

 

Also if you see the left side-bar, it does not scroll despite it has elements hidden at the end of its bottom. How could I restore the scrolling feature for the sidebar like what is here? :
https://colorlib.com/polygon/gentelella/fixed_sidebar.html

To fix this first issue :

.left_col{
   position:fixed;
}

Code (CSS):