title: How to prevent shrinking content inside drawer menu?
body: <p>I'm following this tutorial: <a href="https://www.w3schools.com/howto/howto_js_sidenav.asp" rel="nofollow noreferrer">https://www.w3schools.com/howto/howto_js_sidenav.asp</a> to create drawer sidebar menu.</p>
  <p>But in my case, I have to add wall of text instead of <code>&lt;a&gt;</code> links. Problem is those text grows and shrinks when the drawer opens and closes. <a href="https://jsfiddle.net/52qukbow/" rel="nofollow noreferrer">https://jsfiddle.net/52qukbow/</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>function openNav() {
    document.getElementById("mySidenav").style.width = "500px";
  }
  
  function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-family: "Lato", sans-serif;
  }
  
  .sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .content {
    color: white;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }
  
  @media screen and (max-height: 450px) {
    .sidenav {
      padding-top: 15px;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="mySidenav" class="sidenav"&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
    &lt;div class="content"&gt;
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
      sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
      incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate
      velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;h2&gt;Animated Sidenav Example&lt;/h2&gt;
  &lt;p&gt;Click on the element below to open the side navigation menu.&lt;/p&gt;
  &lt;span style="font-size:30px;cursor:pointer" onclick="openNav()"&gt;&amp;#9776; open&lt;/span&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>How do I prevent the content inside drawer menu grows and shrinks as the drawer opens and closes?</p>