How to separate between upper div and lower div for overflow-x-scroll

Question

I have the following side bar with a top panel div with the logo and x icon:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
    <div class="h-screen top-0 left-0 fixed w-64 bg-blue-300 overflow-y-hidden">
            
            <!-- Begin top panel  -->
            <div class="flex bg-red-300 w-64">
                <span class="flex w-64 p-4 border-b">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M12 14l9-5-9-5-9 5 9 5z" />
                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
                    </svg>
                </span>

                <span class="flex p-4 border-b cursor-pointer">
                    <svg @click="closeSidebar" xmlns="http://www.w3.org/2000/svg" class="items-end h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </span>
            </div>
           
            <!-- End top panel  -->

    
     <aside class="bg-yellow-400 h-full flex">    
        <div class="flex-shrink-0 bg-yellow-100 w-64">One</div>
        <div class="flex-shrink-0 bg-green-300 w-64 overflow-y-auto">Two</div>
        <div class="flex-shrink-0 bg-pink-300 w-64">Three</div>
        <div class="flex-shrink-0 bg-blue-300 w-64">Four</div>
        <div class="flex-shrink-0 bg-indigo-300 w-64">Five</div>
      </aside>
 
    </div>

Below that there are 5 divs that can be scrolled from left to right. But that also scrolls the top div with the panel and I want this panel to stay in place, and only the lower div container (with the 5 inner divs) to scroll.

I tried to add overflow-x-hidden to the wrapping div and adding overflow-x-scroll to the <aside> element (just like I did with overflow-y-hidden) but that didn't work

Answer 1

Use flex-direction: column for your wrapper, set flex-shrink for header to 0, so it will take as much space as needed. The content block will take the rest space, just add overflow-x: auto for this block to have horizontal scroll

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  flex: 0 0 auto;
}

.h-screen {
  flex: 0 1 100%;
  overflow-x: auto;
}

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>

<div class="wrapper">            
            <!-- Begin top panel  -->
            <div class="flex bg-red-300 w-64 header">
                <span class="flex w-64 p-4 border-b">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M12 14l9-5-9-5-9 5 9 5z" />
                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
                    </svg>
                </span>

                <span class="flex p-4 border-b cursor-pointer">
                    <svg @click="closeSidebar" xmlns="http://www.w3.org/2000/svg" class="items-end h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </span>
            </div>
           
            <!-- End top panel  -->
    <div class="h-screen top-0 left-0 w-64 bg-blue-300 overflow-y-hidden">

    
     <aside class="bg-yellow-400 h-full flex">    
        <div class="flex-shrink-0 bg-yellow-100 w-64">One</div>
        <div class="flex-shrink-0 bg-green-300 w-64 overflow-y-auto">Two</div>
        <div class="flex-shrink-0 bg-pink-300 w-64">Three</div>
        <div class="flex-shrink-0 bg-blue-300 w-64">Four</div>
        <div class="flex-shrink-0 bg-indigo-300 w-64">Five</div>
      </aside>
 
    </div>
</div>

Answer 2

Your aside in inside the top bar div which has position fixed. Move the aside out of top bar. Also, why are you using aside for page content? Use main or article instead.

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="h-screen top-0 left-0 fixed w-64 bg-blue-300 overflow-y-hidden">

  <!-- Begin top panel  -->
  <div class="flex bg-red-300 w-64">
    <span class="flex w-64 p-4 border-b">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path d="M12 14l9-5-9-5-9 5 9 5z" />
                        <path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
                    </svg>
                </span>

    <span class="flex p-4 border-b cursor-pointer">
                    <svg @click="closeSidebar" xmlns="http://www.w3.org/2000/svg" class="items-end h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </span>
  </div>

  <!-- End top panel  -->

</div>

<aside class="bg-yellow-400 h-full flex ml-64">
  <div class="flex-shrink-0 bg-yellow-100 w-64">One</div>
  <div class="flex-shrink-0 bg-green-300 w-64 overflow-y-auto">Two</div>
  <div class="flex-shrink-0 bg-pink-300 w-64">Three</div>
  <div class="flex-shrink-0 bg-blue-300 w-64">Four</div>
  <div class="flex-shrink-0 bg-indigo-300 w-64">Five</div>
</aside>