How to organize the page layout: left side with scrolling, right side static?

Question

HTML

Good afternoon.
I don't know how to correctly divide the page into blocks.
A fixed header is on top, a scrollable filter on the left, and a grid on the right that fills 100% of the remaining space.
Now the knee solution looks like this:

.main-body-grid {
  margin-top:120px;
  position:relative;
}

.main-body-grid > .grid-left,
.main-body-grid > .grid-right {
  padding: 0;

}

.main-body-grid > .grid-left {
  position:fixed;
  top:120px;
  bottom:0;
 
  overflow:auto;

}

.main-header-grid > .grid-left,
.main-body-grid > .grid-left {
  width:350px;
}

.main-header-grid > .grid-right,
.main-body-grid > .grid-right {
  margin-left:360px;
  position:relative;
}

.main-header-grid > .grid-left {
  float:left;
}

.main-body-grid .side-navigation {
  position:relative;
}

.main-body-grid .side-navigation.ng-hide {
  display:block!important;
}

But the idea of ​​indentation doesn't make me happy. Perhaps there are ready-made plugins or solutions?

Answer 1

here is materializecss.com/getting-started.html

Answer 2

foundation.zurb.com/apps

Answer 3

Can nanoscroll be used

Answer 4

On the left, you can make a tall div that will scroll with a general scroll, and a static div is just position:fixed;
But I'm not sure how correct this approach would be.