如何区分overflow-x-scroll的上div和下div答案

【问题标题】：How to separate between upper div and lower div for overflow-x-scroll如何区分overflow-x-scroll的上div和下div
【发布时间】：2021-10-05 23:55:25
【问题描述】：

我有以下带有顶部面板 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 个内部 div）可以滚动。

我尝试将 overflow-x-hidden 添加到包装 div 并将 overflow-x-scroll 添加到 <aside> 元素（就像我对 overflow-y-hidden 所做的那样），但这没有用

【问题讨论】：

标签： html css tailwind-css

【解决方案1】：

将flex-direction: column 用作您的包装器，将flex-shrink 用于header 设置为0，这样它将根据需要占用尽可能多的空间。内容块将占用剩余空间，只需添加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>

【讨论】：

谢谢！是否可以不使其具有固定高度，因此它会针对不同的分辨率自动调整其高度（Tailwind 支持md、lg 等），我想知道是否可以相对高度进行调整？
@Stackerito 我已经更新了sn-p，你可以使用flex-direction: column 并且只为内容块添加水平滚动

【解决方案2】：

您在顶部栏 div 中的位置已固定。将侧面移出顶部栏。另外，为什么要在页面内容中使用搁置？请改用 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>

【讨论】：

完全坏掉了：D