absolute positioned element activating scroll

Question

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.

body{
  padding: 0;
  margin: 0;
}

.container{
  display: flex;
  flex-direction: column;
}

.header{
  padding: 12px;
  flex: 0 0 75px;
  background: yellow;
  overflow-x: hidden;
}

.content{
  flex: 1 1 auto;
  padding: 12px;
}

.dropdown{
  position: relative;
}

.menu{
  padding: 12px;
  position: absolute;
  background: white;
  top: 100%;
  left: 0;
}

ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="header">
    <div class="dropdown">
      <button>Dropdown</button>
      <div class="menu">
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </div>
    </div>
  </div>
  <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.
  </div>
</div>

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:

What exactly are you trying to do? And why is there a button that doesn't have any functionality? What does "activating the scroll" mean? — TheThirdMan, Aug 04 '16 at 14:11
Please specify your exact goal. Do you want to just remove the scrollbar or do you want to dynamically adjuste the headers height? — andreas, Aug 04 '16 at 14:12
i am trying to show a dropdown menu in the header. its a crude way of showing it but its enough to show the issue i am facing. the only thing the button will do is hide and show the menu. if the menu is shown, the header scroll is activated. how do i avoid activating the header scroll but still show the menu? — takeradi, Aug 04 '16 at 14:13
It appears that your example isn't complete then, as the way I understand you, something happens when you toggle the menu, and the toggle script isn't part of your example... or am I still misunderstanding you? — TheThirdMan, Aug 04 '16 at 14:17
If you disable the scroll the dropdown is to big for the height. So you simply have to raise the height of the .header-element. — rakete, Aug 04 '16 at 14:17
i am only displaying the dropdown menu open state. I know I dont have the script in the example because its not relevant to the question. I want the complete dropdown to overlay on the header in the open state which is shown in the example. Right now the header is activating the vertical scroll. I dont want that to happen. I want the menu to go past the header height and show the menu — takeradi, Aug 04 '16 at 14:20
here is an example of dropdown using Bootstrap http://stackoverflow.com/questions/34722200/link-dropdown-bootstrap-wont-work/34722594#34722594 — Yaser Ali Peedikakkal, Aug 04 '16 at 14:22
@takeradi: You would be correct, my bad... please see my answer for what I believe will resolve your issue. — TheThirdMan, Aug 04 '16 at 14:30

score 2 · Accepted Answer · edited May 23 '17 at 12:00

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.

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

I didn't down vote the post :-). Your answer solves my issue. I wouldn't be able to use overflow hidden — takeradi, Aug 04 '16 at 15:48

score 0 · Answer 2 · answered Aug 04 '16 at 14:31

Something like this ?

The scrollbar is caused due to overflow-x, removing overflow would remove the scrollbar.

body {
  padding: 0;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
}
.header {
  padding: 12px;
  flex: 0 0 75px;
  background: yellow;
}
.content {
  flex: 1 1 auto;
  padding: 12px;
}
.dropdown {
  position: relative;
}
.menu {
  padding: 12px;
  position: absolute;
  background: white;
  top: 100%;
  left: 0;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="header">
    <div class="dropdown">
      <button>Dropdown</button>
      <div class="menu">
        <ul>
          <li>one</li>
          <li>two</li>
          <li>three</li>
          <li>four</li>
        </ul>
      </div>
    </div>
  </div>
  <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.
  </div>
</div>

absolute positioned element activating scroll

2 Answers2