如何在 overflow-x-scroll 的上 div 和下 div 之间分开
How to separate between upper div and lower div for overflow-x-scroll
我有以下侧边栏，顶部面板 div 带有徽标和 x 图标：
<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 个内部 divs）可以滚动。
我尝试将 overflow-x-hidden 添加到包装 div 并将 overflow-x-scroll 添加到 <aside> 元素（就像我对 overflow-y-hidden 所做的一样）但是那没有用
将 flex-direction: column 用作包装器，将 header 的 flex-shrink 设置为 0，因此它会根据需要使用尽可能多的 space。内容块将占用其余 space，只需添加 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>
你在顶部栏内的旁边 div 位置固定。将旁边移出顶部栏。
另外，为什么要使用 aside 作为页面内容？请改用 main 或 article。
<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>
我有以下侧边栏，顶部面板 div 带有徽标和 x 图标：
<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 个内部 divs）可以滚动。
我尝试将 overflow-x-hidden 添加到包装 div 并将 overflow-x-scroll 添加到 <aside> 元素（就像我对 overflow-y-hidden 所做的一样）但是那没有用
将 flex-direction: column 用作包装器，将 header 的 flex-shrink 设置为 0，因此它会根据需要使用尽可能多的 space。内容块将占用其余 space，只需添加 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>
你在顶部栏内的旁边 div 位置固定。将旁边移出顶部栏。 另外，为什么要使用 aside 作为页面内容？请改用 main 或 article。
<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>