Почему у элемента с overflow-x: hidden, при добавлении дочернего элемента с position: absolute; появляется вертикальный скролл?

Question

[YellowFilin]

Если элементу задать свойства overflow-x: hidden и position: relative, а дочерний элемент сделать абсолютно позиционированным и задать отступ, то у родителя появляется вертикальный скролл. Почему элемент с position: absolute начинает влиять на родителя? Если убрать одно из свойств overflow-x или position у родителя, то скролл пропадает.

jsfiddle.net/otj98vam

.one {
  width: auto; 
  height: 100px; 
  border: 1px solid #000; 
  overflow-x: hidden; 
  position: relative;  
}

.two {
  width: 50px; 
  height: 100px; 
  top: 50px;
  background: red; 
  position: absolute; 
}

<div class="one">
  <div class="two">
  
  </div>
</div>

Answer 1

[look2009]

Т.к. .one имеет position: relative; что означает наследовать параметры, и для position: absolute; он становится основным для позиционирования. Исходя из это position: absolute; будет слушаться и позиционироваться внутри этого блока overflow-x: hidden; его скроет и добавит скролл.