takeradi takeradi - 1 year ago 163
CSS Question

absolute positioned element activating scroll

I have a dropdown menu in my header (which is always open in this example).When the menu is open, it is activating the header scroll when its open. How can I make the menu visible without activating the vertical header scrollbar? Please note that I need to have the

overflow-x: hidden
set on the header because if people add a lot of elements in the header, the header horizontal scroll should not activate. The overflowing elements should just be hidden horizontally.

padding: 0;
margin: 0;

display: flex;
flex-direction: column;

padding: 12px;
flex: 0 0 75px;
background: yellow;
overflow-x: hidden;

flex: 1 1 auto;
padding: 12px;

position: relative;

padding: 12px;
position: absolute;
background: white;
top: 100%;
left: 0;

list-style: none;
margin: 0;
padding: 0;

<div class="container">
<div class="header">
<div class="dropdown">
<div class="menu">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi distinctio sit asperiores tenetur dolorum ratione cupiditate, ea, quia numquam, inventore aspernatur repudiandae, sapiente recusandae dolorem. Quidem rem molestias, fugit molestiae.

For example:
The stackoverflow dropdown: The dropdown menu appears over the header when open without the header having a scrollbar. I want something like this to happen:

enter image description here

Answer Source

Your problem is that by setting overflow-x, you are setting an overflow property for the whole element. Even though you're not setting an overflow-y specifically, this will cause your container to enable scrollbars even though your menu is absolute-positioned.

You will have to remove the overflow-x property in order to solve this problem.

The reason for this I will quote from @JamesKhoury's answer to this question:

If you are using visible for either overflow-x or overflow-y and something other than visible for the other. The visible value is interpreted as auto.

You might also check out this analysis on what combinations are causing problems in this way.

As the downvote on this post is likely because the question specifies that the overflow-x is required, let me state again that there is no way to get an absolute-positioned element from within an element with an overflow property to display in said manner. From this point, you can decide whether to scrap the overflow property or the entire menu, and the former is clearly easier to work around.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download