title: How to make scrollable sidebar fixed in TailwindCSS
body: <p>I came across the BetterDev sidebar in which, if we add content to it, the sidebar also scrolls. Is there a way to make that sidebar fixed and not scrollable? I tried sticky, corrected with top-0 and left-0, but it didn't work.</p>
  <ul>
  <li><a href="https://i.stack.imgur.com/N1TwN.png" rel="nofollow noreferrer">Image when content is not there</a></li>
  <li><a href="https://i.stack.imgur.com/3L6Gr.png" rel="nofollow noreferrer">Image when content is there</a></li>
  </ul>
  <pre class="lang-html prettyprint-override"><code>    &lt;div class=&quot;relative min-h-screen md:flex&quot;&gt;
      
        &lt;!-- mobile menu bar --&gt;
        &lt;div class=&quot;bg-gray-800 text-gray-100 flex justify-between md:hidden&quot;&gt;
          &lt;!-- logo --&gt;
          &lt;a href=&quot;#&quot; class=&quot;block p-4 text-white font-bold&quot;&gt;Better Dev&lt;/a&gt;
      
          &lt;!-- mobile menu button --&gt;
          &lt;button class=&quot;mobile-menu-button p-4 focus:outline-none focus:bg-gray-700&quot;&gt;
            &lt;svg class=&quot;h-5 w-5&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot;&gt;
              &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M4 6h16M4 12h16M4 18h16&quot; /&gt;
            &lt;/svg&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      
        &lt;!-- sidebar --&gt;
        &lt;div class=&quot;sidebar bg-blue-800 text-blue-100 w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform -translate-x-full md:relative md:translate-x-0 transition duration-200 ease-in-out&quot;&gt;
      
          &lt;!-- logo --&gt;
          &lt;a href=&quot;#&quot; class=&quot;text-white flex items-center space-x-2 px-4&quot;&gt;
            &lt;svg class=&quot;w-8 h-8&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot;&gt;
              &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z&quot; /&gt;
            &lt;/svg&gt;
            &lt;span class=&quot;text-2xl font-extrabold&quot;&gt;Better Dev&lt;/span&gt;
          &lt;/a&gt;
      
          &lt;!-- nav --&gt;
          &lt;nav&gt;
            &lt;a href=&quot;#&quot; class=&quot;block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white&quot;&gt;
              Home
            &lt;/a&gt;
            &lt;a href=&quot;&quot; class=&quot;block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white&quot;&gt;
              About
            &lt;/a&gt;
            &lt;a href=&quot;&quot; class=&quot;block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white&quot;&gt;
              Features
            &lt;/a&gt;
            &lt;a href=&quot;&quot; class=&quot;block py-2.5 px-4 rounded transition duration-200 hover:bg-blue-700 hover:text-white&quot;&gt;
              Pricing
            &lt;/a&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
      
        &lt;!-- content --&gt;
        &lt;div class=&quot;flex-1 p-10 text-2xl font-bold&quot;&gt;
          content goes here
        &lt;/div&gt;
      
      &lt;/div&gt;
  </code></pre>
  <p>How do I make the the navbar fixed after medium breakpoint and make the content scrollable when a lot content is added?</p>
  <p><a href="https://codepen.io/chris__sev/pen/RwKWXpJ" rel="nofollow noreferrer">Codepen Link</a></p>