overflow-x: авто создает нежелательную вертикальную полосу прокрутки

Question

У меня есть набор кнопок, который представляет собой список с отображением: inline-block. Внутри некоторых кнопок (li) есть div-ы, которые могут иметь некоторый контент, каждая из которых абсолютно расположена ниже родительского li. Список находится внутри div с overflow-x: auto, потому что я не знаю, сколько будет кнопок. Тем не менее, 'overflow-x: auto' создает вертикальную полосу прокрутки, которая мне не нужна, и я понятия не имею, почему она есть. Я думал, что абсолютные элементы удаляются из потока документов? Вот фрагмент:

#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>

, и это то, чего я хочу достичь (я просто удалил «overflow-x: auto» из «#links ul», но мне это нужно если кнопок больше, чем места для них):

#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>

Затем я приму javaScript, чтобы скрыть / отобразить «.link-content» при нажатии кнопки. Спасибо.

Answer 1

Ваш ответ в примере ниже.

Проблема в том, что «вы неправильно понимаете position:absolute. Абсолютное положение только нарушает нормальный поток, и теперь оно движется в соответствии со своим якорным элементом (с position: относительным). Но это не влияет его высота или ширина. Когда вы пытаетесь сжать страницы или создать обертку, содержащую всю структуру, высота и ширина элемента - (с position: absolute) по-прежнему является сущностью, и при принудительном использовании прокрутки (overflow: auto) это будет абсолютно считаться «легальным HTML элементом - с его высотой и шириной».

Обычно вы этого не найдете, потому что в основном position:absolute используется в меню, которые довольно малы и не тот большой размер, что они go вне страницы.

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>