溢流-x-涡卷上、下div之间的分离方法

Question

我有一个带有徽标和x图标的顶部面板div的侧栏：

​

<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>

​

下面有5个可以从左向右滚动的div。但是，这也会滚动面板上的div，我希望这个面板保持不变，只有较低的div容器(5个内部div)可以滚动。

我试图将overflow-x-hidden添加到包装div中，并将overflow-x-scroll添加到<aside>元素中(就像我对overflow-y-hidden所做的那样)，但这是行不通的

Answer 1

使用flex-direction: column作为包装器，将flex-shrink for header设置为0，因此它将占用所需的空间。内容块将占用rest空间，只需为该块添加具有水平滚动的overflow-x: auto即可。

​

.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

你的旁边在顶部的酒吧内有固定的位置。把旁边从顶上的酒吧移开。另外，你为什么要把页面内容留出呢？使用主或文章代替。

​

<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>

​