overflow x: hidden causes vertical scrollbar

Question

My problem is that when I define overflow-x:hidden, it creates an unwanted scrollbar.

I am trying to achieve something similar to this question.

I have tried the solution suggested there but that didn't work. Below is my code:

CSS and HTML:

.wrapper {
  margin-top: 50px;
}

.menu_container {
  color: #333;
  text-align: center;
  padding: 1em;
  background: #607D8B;
  width: 20%;
  height: 30px;
  overflow-x: hidden;
}


.submenu {
  background: #E0E0E0;
  height: 100px;
  width: 50px;
}

.menu_list {
  width: 300px;
}

<body>
  <div class="wrapper">
    <div class="menu_container">
      <div class="menu_list" align="left">
        Menu 1 Menu2 Menu 3
      </div>
      <div class="submenu">
        sub
      </div>
    </div>
  </div>
</body>

Here is the JSFiddle link.

The question you linked to talks about a scroll bar, which is not present on your JSfiddle. What exactly did you want your result to be? — Ben Rondeau, Apr 22 '15 at 01:56
The question you linked to talks about removing a scroll bar. Your question is not clear what you want as an end result. Please clarify what you want your end result to be — Ben Rondeau, Apr 22 '15 at 01:59
The end result that I want is explained in the question I linked: "Hiding content that has overflowed in the x-direction while keeping content that has overflown in the y-direction visible" I have also updated my JSFiddle to show the failure. @BenRondeau — abeprosper, Apr 22 '15 at 03:06

score 4 · Answer 1 · edited Dec 17 '21 at 10:47

4

overflow-x: clip; did actually solve this problem for me.

clip: [...] The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling. [...]

From: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

edited Dec 17 '21 at 10:47

pso

513
1
16

answered Aug 12 '21 at 20:50

omar

41
2

score 1 · Answer 2 · answered Apr 22 '15 at 02:04

You could either add html {overflow-y:hidden} as well to your CSS or add html {height:100%;} to remove the y-scrollbar ( or thats atleast what I think you want to accomplish).

Adding html {overflow-y:hidden} would do that exact same thing as overflow-x but removes the y scroll bar. This maybe useful for what you are trying to accomplish, but its downside is that it hides all content that extends past 100% height of the browser.

Adding html {height:100%;} to your CSS would tell the browser that the webpage is exactly 100% of the browser size. This will move all of the content inwards so it fits all on the page (unless positioning is defined by pixels rather than percents). The downside to this method is that pushing all the content inwards may give you different results on different browsers and sizes.

Overall, I say you just keep the scroll bar, it will save you a lot of time in positioning and it just constricts your page.

Thanks for the response @ShaunLoftin. I actually want to have the content in the y direction visible. Wouldn't {overflow-y: hidden} achieve the opposite of this? Also the reason why I want the y content to be visible is this: Imagine a situation where "Menu1", "Menu2" and "Menu3" are menu items on a navigation bar and "sub" is a pop-up menu that shows up once the user clicks "Menu 1". For a better user experience I want the div with "sub" to show up without scroll bars. — abeprosper, Apr 22 '15 at 03:04
Then use the height method as I said and media queries to define your page based on browser sizes. — shaun, Apr 22 '15 at 03:06

zork media · Accepted Answer · 2015-04-22T07:49:41.760

I see two ways to achieve your goal:

1. Set height of .menu_container to auto

HTML stays as it was, here is the CSS:

.wrapper {
margin-top: 50px;
}

.menu_container {
color: #333;
text-align: center;
padding: 1em;
background: #607D8B;
width: 20%;
height: auto; /* NEW */
overflow-x:hidden;
}

.submenu {
background: #E0E0E0;
height: 100px;
width: 50px;
display: none; /* I added this to show the effect when .submenu is invoked */
}

.menu_container:hover .submenu {
display: block; /* I added this to show the effect when .submenu is invoked */
}

.menu_list {
width: 300px;
}

Just hover over .menu_container: FIDDLE

This solution will make .menu_container grow, so the rest of the content is pushed down when .submenu is shown.

2. Wrap .submenu in a seperate DIV and position it absolute

With this method, the .menu_container will not grow, so the following content stays where it is.

HTML:

<body>
 <div class="wrapper">
  <div class="submenu_container"> <!-- NEW -->
   <div class="menu_container">
    <div class="menu_list" align="left">
     Menu 1 Menu2 Menu 3
    </div>
   </div>
   <div class="submenu">
    sub
   </div>
  </div>
 </div>
</body>

CSS:

  .wrapper {
   margin-top: 50px;
  }

  .menu_container {
  color: #333;
  text-align: center;
  padding: 1em;
  background: #607D8B;
  width: 20%;
  height: 30px;
  overflow: hidden;
  }

  .submenu_container { /* NEW */
  position: relative;
  }

 .submenu {
 background: #E0E0E0;
 height: 100px;
 width: 50px;
 position: absolute; /* NEW */
 left: 20px; /* Adjust to your needs */
 top: 40px; /* Adjust to your needs */
 }

 .menu_list {
 width: 300px;
 }

See the FIDDLE

This is PERFECT! Thanks @zork media. Sadly I can't upvote the answer since I have reputation that is less than 15. I will do so the moment I reach that reputation level. Thanks once again. — abeprosper, Apr 22 '15 at 14:34
Glad to hear it. By the way: As the one who asked you don't have to vote up an answer. You can set the checkmark beneath the voting arrows to accept an answer as "correct". This will also tell Stackoverflow that the issue is closed and you've got a sufficient answer to your question. — zork media, Apr 22 '15 at 19:12
In my particular case, when using `height:auto`, I had to change `overflow-x:hidden` by simply `overflow:hidden` to get rid of the annoying vertical scroll bar. — Bigue Nique, May 10 '19 at 08:06

overflow x: hidden causes vertical scrollbar

3 Answers3