具有可滚动内容的嵌套粘性侧边栏

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

将来，包含尚未起作用的解决方案会很有帮助。

如果我对您的问题的理解正确，您希望在滚动浏览内容时让 sidebar2 保持固定。这可以使用 position: absolute

来实现

使用示例解释定位here

Answer 2

我不确定你的意思是不是侧边栏 1 和 2 应该始终是粘性的，但我制作的屏幕几乎与你提供的完全相同，我在内容 div 中添加了 overflow-y-scroll不会溢出

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

具有可滚动内容的嵌套粘性侧边栏

Nested sticky sidebar with scrollable content

css

flexbox

overflow

tailwind-css

sidebar