css - 带有可滚动内容的嵌套粘性侧边栏

Question

我正在尝试构建具有以下形状的布局:

我正在尝试使用 tailwind css 和 flex 属性构建布局，但我无法正确获取第二个侧边栏。要么侧边栏随内容滚动，要么根本无法滚动内容。

我的顺风代码大致如下:

  <div className="flex"> 
    <div className="h-screen sticky top-0">
        { Sidebar1 code ...}
    </div>

      <div className="min-h-0 w-full">
          <div className="flex gap-x-4 p-5">
              <div className="sticky flex-none w-1/5">
                {sidebar 2 code }
             </div>

        <div className="p-5">{content}</div>
    </div>
    </div>
  </div>

我尝试使用溢出属性，但无法得到我想要的。我缺少什么？

Answer 1

我不确定您是否意味着侧边栏 1 和 2 应该始终保持粘性，但我制作了几乎与您提供的屏幕完全相同的屏幕，我将 overflow-y-scroll 添加到内容 div 不会溢出

在这里检查:https://play.tailwindcss.com/SzzWQnn5Fi