title: How to add scroll bar to a div when the parent div has hidden overflow
body: <p>I have a panels that are located on top of each other and in order to align them correctly, I needed to hide the overflow. However, each panel will need a scroll bar.
  I can not apply a scroll bar since the parent panel has overflow as hidden.</p>
  <p>In the below example, if you click on the button, the content of the back panel is larger than the size of the panel and needs a vertical scroll bar.</p>
  <p><a href="https://jsfiddle.net/q3hLv2os/3/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".backpnl").on('click tap', function() {
    
    $( '.frontPanel' ).toggleClass('active', 500)
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.mainPanel {
    width: 400px;
    height: 400px;
    border: 1px solid #000;
    position: relative;
    overflow: hidden;
  }
  
  .frontPanel {
    background: #5D1202;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    padding: 20px;
  }
  
  .backPanel {
    background: #280700;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    box-shadow: inset 0px 0px 20px 0px #000;
    padding: 20px;
  }
  .backPanel:before{
    content: "";
      position: absolute;
      z-index: -1;
      display: block;
      width: 400px;
      height: 400px;
  }
  .frontPanel.active{
    margin-left: 350px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="mainPanel"&gt;
    &lt;div class="frontPanel"&gt;
      &lt;h1&gt;Front Panel&lt;/h1&gt;
      &lt;button class="backpnl"&gt;Click here&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class="backPanel"&gt;
      &lt;h1&gt;Back Panel&lt;/h1&gt;
      &lt;p&gt;--- Text 1---&lt;/p&gt;
      &lt;p&gt;--- Text 2---&lt;/p&gt;
      &lt;p&gt;--- Text 3---&lt;/p&gt;
      &lt;p&gt;--- Text 4---&lt;/p&gt;
      &lt;p&gt;--- Text 5---&lt;/p&gt;
      &lt;p&gt;--- Text 6---&lt;/p&gt;
      &lt;p&gt;--- Text 7---&lt;/p&gt;
      &lt;p&gt;--- Text 8---&lt;/p&gt;
      &lt;p&gt;--- Text 9---&lt;/p&gt;
      &lt;p&gt;--- Text 10---&lt;/p&gt;
      &lt;p&gt;--- Text 11---&lt;/p&gt;
      &lt;p&gt;--- Text 12---&lt;/p&gt;
      &lt;p&gt;--- Text 13---&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any idea how I can fix this so panels can have scroll bars if required?</p>