CODEWITHSUNDEEP
htmlcss
user3196181
user3196181

Reputation: 19

overflow-x: auto creates unwanted vertical scroll-bar

I have a set of buttons which is a list with display: inline-block. Inside some of the buttons (li) there are div-s that may have some content, each is absolutely positioned below the parent li. The list is inside a div that has overflow-x: auto, because I don't know how many buttons there will be. However, the 'overflow-x: auto' creates a vertical scroll bar which I don't want and I have no idea why it's there. I thought that absolute elements are removed from the document flow? Here is the snippet:

#links, #content { 
  width: 100%; 
  position: relative; 
}
#links { 
  z-index: 1; 
  overflow-x: auto; 
  white-space: nowrap; }
#links li { 
  display: inline-block; 
  width: 100px; 
  height: 40px; 
  background: brown; 
  text-align: center; 
  color: #fff; 
  position: relative; 
}
#links .link-content { 
  position: absolute; 
  top: 40px; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #66f; 
}
#content { 
  z-index: 0; 
  background: #ccc; 
  height: 100px; 
}
<div id="links">
    <ul>
        <li>Link 1<div class="link-content">Link Content</div>
        </li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li>Link 5</li>
    </ul>
</div>
<div id="content">
</div>

, and this is what i want to achieve (i simply removed the 'overflow-x: auto' from '#links ul', but I need that in case there's more buttons than the space for them):

#links, #content { 
  width: 100%; 
  position: relative; 
}
#links { 
  z-index: 1; 
  /*overflow-x: auto;*/ 
  white-space: nowrap; }
#links li { 
  display: inline-block; 
  width: 100px; 
  height: 40px; 
  background: brown; 
  text-align: center; 
  color: #fff; 
  position: relative; 
}
#links .link-content { 
  position: absolute; 
  top: 40px; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #66f; 
}
#content { 
  z-index: 0; 
  background: #ccc; 
  height: 100px; 
}
<div id="links">
    <ul>
        <li>Link 1<div class="link-content">Link Content</div>
        </li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
        <li>Link 5</li>
    </ul>
</div>
<div id="content">
</div>

I will then apply javaScript to hide/display the '.link-content' upon button click. Thank you.

Upvotes: 2

Views: 1849

Answers (1)

Deadpool
Deadpool

Reputation: 8240

Your answer is in the example below.

The issue is "you are understanding position:absolute in a wrong manner. Position absolute only breaks the normal flow and now it moves according to its anchor element (with position: relative). But, it does not affect its height or width. When you are trying to compress pages or making a wrapper containing the whole structure, the height and width of element - (with position:absolute) is still an entity and on forcing and putting scroll (overflow:auto) that will absolutely be counted as a "legal HTML Element - with its height and width".

Normally you do not find this, because mostly position:absolute is used in menus, which are pretty small and not of that big size that they go out of page.

section {
  overflow:auto;
  height:110px;width:110px;
}

div {height: 100px;width:100px;background: red; position:relative;}

p {height: 200px; width: 200px;background: blue; position:absolute;left:5px;top:5px;}
<section>
  <div>
    <p></p>
  </div>
 </section>
 
<div>
  <p></p>
</div>

Upvotes: 1

Related Questions