I want to make a scrollable sidebar and I ran into a problem. I added some dropdowns and I wanted their content to be displayed next to the dropdown. The problem is, that for some reason I can't combine overflow auto with visible as described in this post. This meant that I had to resort to using overflow-y: auto; overflow-x: hidden;. Though this introduces a new problem. How to display the dropdown content next to the sidebar when overflow hidden cuts it off. I noticed that position: absolute bypasses overflow hidden, but I need to use position: relative; because I need the content positioned relative to the sidebar and not the page. Making the content absolute and putting it inside a relative container doesn't work either. I should also note that I know how to solve the issue with JS, but I want to know if it is somehow possible with just HTML and CSS.
Here is a short snippet that demonstrates my issue:
nav {
width: 20%;
height: 100vh;
background-color: red;
overflow-y: auto;
overflow-x: hidden;
}
.container {
position: relative;
}
.content {
position: absolute;
left: 5rem;
background-color: blue;
}<!DOCTYPE html>
<html>
<body>
<nav>
<span>Navbar Item</span>
<div class="container">
<div class="content">
<span>This should go outside the nav</span>
</div>
</div>
</nav>
</body>
</html>This is the closest I could get to what I want: Notice how the absolute element only has left positioning defined, as adding top or bottom would break it. The problem is that I need the top and bottom styles to position everything correctly in a more complex layout.
nav {
width: 20%;
height: 100vh;
background-color: red;
overflow-y: auto;
overflow-x: hidden;
}
div {
position: absolute;
left: 5rem;
background-color: blue;
}<!DOCTYPE html>
<html>
<body>
<nav>
<span>Navbar Item</span>
<div>
<span>This should go outside the nav</span>
</div>
</nav>
</body>
</html>