html - Sidebar which can scroll but with the main content fixed -

i attempting create sidebar can scroll, main content on right fixed (no scroll).

but when try work around not work, here example

html

<div id="container">     <div id="outer-wrapper" class="is-open">         <div id="inner-wrapper">         </div>         <div id="sidebar">         </div>     </div> </div> 

css

#sidebar {     height: 100%;     position: absolute;     top: 0;     left: -80%;     width: 80%; }  .is-open {     //expose sidebar translating wrapper     -webkit-transform: translatex(80%);     transform: translatex(80%); }  #container {     //disables horizontal scroll     overflow: hidden; } 

here fiddle might testing https://jsfiddle.net/minheq/tn2no1o6/3/

please, advice on this?

something this?

body {    width: 100%;    height: 100%;    overflow: hidden;  }    .container, .wrapper {    display: block;    width: 100%;    height: 100%;    overflow: hidden;  }    .content {    width: 100%;    height: 100%;    position: absolute;    top: 0;    left: 0;    z-index: 0;    background: #ddd;    padding: 10px;    padding-left: 230px;  }  .sidebar {    width: 200px;    height: 100%;    position: absolute;    left: 0;    top: 0;    padding: 10px;    background: #849;    overflow: auto;  }  .sidebar-content {    width: 100%;    height: 600px;    background: #994;    z-index: 1;  }

<div class="container">    <div class="wrapper">      <div class="content">lorem ipsum dolor</div>      <div class="sidebar">        <div class="sidebar-content">amet dolor ipsum</div>      </div>    </div>  </div>