隐藏文件夹侧边栏上的溢出

问题描述 投票：0回答：1

我正在努力制作一个基本的 CSS 侧边栏，但我不明白为什么。它似乎适用于 codepen 示例，但我可能会错过一些东西。

这里我在 Astro 组件中有一些代码（带有 tailwindcss 的 html）

<body class="flex flex-col items-center max-w-full min-w-full min-h-screen lg:max-w-5xl lg:min-w-[1024px] overflow-hidden">
<header class="flex w-full h-20 overflow-hidden">

<div class="overflow-hidden">
    <div
        class="nav-menu absolute w-80 h-full overflow-hidden -right-80 bg-red-600 shadow-md -z-10 transition-all opacity-0">
        <p>Test</p>
    </div>
</div>

</header>
</body>

div设置了负的右值，变为0以展开它。它应该被隐藏。在我的屏幕上，它确实是隐藏的，但溢出不是，而且我可以向右滚动。我在我的 body、父 div、div 和 subdiv 上放了一些 

overflow: hidden
，但仍然不起作用。

其他信息：

  • 这个 div 隐藏在桌面大小上，尽管我不确定它是否会改变任何东西
  • 我尝试删除标题上的 
    w-full
    类，问题仍然出现

如有任何帮助，我们将不胜感激！

html css tailwind-css navbar sidebar
1个回答
0
投票

overflow-x 控制内容如何溢出横轴。

<body class="flex flex-col items-center w-full min-w-full min-h-screen lg:max-w-5xl lg:min-w-[1024px] overflow-x-hidden">
  <header class="flex w-full h-20 overflow-hidden">
    <div class="relative">
      <div class="sidebar absolute w-80 h-full -right-80 bg-red-600 shadow-md opacity-0">
        <p>Test</p>
      </div>
    </div>
  </header>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.