我在 Better Dev 频道上关注 chris sev 的 tutorial。
这里是教程的codepen。
我想固定这个侧边栏并避免滚动。现在，如果我放置内容，侧边栏也会随着内容滚动。
我已经在 sidebar 类的 div 上尝试了 fixed top-0 和 sticky top-0。
这一切似乎都没有。有人知道如何固定侧边栏吗？
【问题讨论】：
md:relative 替换为md:fixed
标签： tailwind-css
您的示例的主要问题是 flex 的错误使用以及您如何实现它。
这是您的codepen 链接的干净版本（没有移动版本，我会让您处理它；）
简而言之，您需要确保 FLEX 主应用程序将使用完整的窗口大小：
<div id="app" class="fixed flex w-full h-full ...">
设置主应用后，您只需让子应用适应您的需求：
<div id="sidebar" class="w-64 ...">
如您所见，您只需要设置“静态”元素的宽度（需要始终保持不变的元素）
动态元素——内容容器——将具有更大的灵活性，因此我们应用.flex-1：
<div id="content" class="flex-1 overflow-auto ...">
这实际上与顺风无关，而是与display: flex; 本身有关。
（PS：我已经编辑所以你只能看到重要的类）
【讨论】：