overflow-x: auto creates unwanted vertical scroll-bar - html

Question

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.

Answer 1

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>