Question 258832 in Html Question posted in
Some basic documentation can be found here.

Html – Hiding overflow on folder sidebar

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 !

Tags:

2

Answers


  1. 0

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

    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