skip to Main Content

I am struggling to make a basic CSS sidebar, and I can’t figure out why. It seems to work on codepen examples, but I might miss something.

Here I have some code in an Astro component (html with tailwindcss)

<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>

The div is set with a negative right value, which changes to 0 to unfold it. It is supposed to be hidden. On my screen, it is indeed hidden, but the overflow is not, and I can scroll to the right. I’ve put some overflow: hidden on my body, parent div, div and subdiv, still it doesn’t work.

Additional infos :

  • This div is hidden on desktop size, though i’m not sure if it changes anything
  • I’ve tried removing the w-full class on the header, issue still occuring

Any help would be appreciated !

2

Answers


  1. overflow-x controls how the content that overflows the horizontal axis.

    <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>
    
    Login or Signup to reply.
  2. You can explicitly set the height so that it takes the full viewport height.

    The only change needed is adding h-screen to <div class="relative h-screen">

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search