Zagnieżdżone elementy div tworzące pasek przewijania. Czemu?

Question

mam 3 zagnieżdżone div:

<div class="outer"> 
    <div class="inner"><div class="item"></div></div> 
</div> 

.inner div pozycji absolutnej i każdy z nich ma 1px granicznych:

.outer{ 
    width:50%; 
    height:100px; 
    border: 1px solid red; 
    position:relative; 
    overflow-x:hidden; 
    box-sizing:border-box; 
} 
.inner{ 
    border:1px solid blue; 
    height:100%; 
    position: absolute; 
    box-sizing: border-box; 
} 
.item{ 
    width:100px; 
    height:100%; 
    background-color:yellow; 
    display: inline-block; 
    border:1px solid green; 
    box-sizing:border-box; 
} 

taki układ do przewijania na div .outer.

Oto codepen

Dlaczego to jest i co trzeba zmienić, aby zatrzymać to dzieje?

Jeśli szerokość obramowania .innera zostanie zwiększona do 3 pikseli, pasek przewijania zniknie. Znowu, dlaczego tak się dzieje?

Answer 1

Dzieje się tak dlatego, że elementem .item jest ustawione wyświetlanie jako inline-block. Oznacza to, że ma wpływ na takie rzeczy, jak line-height i vertical-align. Domyślne pionowe wyrównanie elementów inline-block jest domyślne. Oznacza to, że są ustawione, aby pojawiać się w linii bazowej dowolnego tekstu, który może być wpisany obok. Nie jestem w 100% pewny, ale myślę, że tutaj może być problem, w którym box-sizing jest ignorowany podczas dokonywania tego obliczenia, a linia podstawowa kończy się o 2 piksele poniżej miejsca, w którym powinna być (ze względu na skumulowane 2 piksele granicy zastosowane do górny i dolny element).

Jeśli chcesz zachować ten element jest wyświetlany w ten sposób, szybkie poprawki jest ustalenie jego vertical-align do top:

.item { 
    ... 
    vertical-align: top; 
} 

Codepen demo.

Answer 2

Dlaczego używasz inline-block w elemencie wewnętrznym? Jeśli zmieni się zablokować przewijania znika:

.item{ 
    width:100px; 
    height:100%; 
    background-color:yellow; 
    display: block; 
    border:1px solid green; 
    box-sizing:border-box; 
} 

Answer 3

Najdziwniejsze jest to, że po usunięciu overflow-x:hidden; pasek przewijania znika. Powodem jest to, że domyślne zachowanie overflow jest visible więc jeśli nie bałagan z tym, wyniki będzie żadnych paski przewijania, ale ustawień overflow-x do pewnej wartości, zestawy do autooverflow-y zamiast wartości domyślnej, która jest visible i w rezultacie pojawi się pasek przewijania.

Jeśli ustawisz overflow na auto, pojawi się pasek przewijania.

Z drugiej strony, .item jest ustawione na inline-block, więc ma line-height, który wytwarza miejsce na dole. Ustawienie .inner na line-height:0 spowoduje, że przestrzeń zniknie, a jeśli ją zwiększysz, również się zwiększy.

Z drugiej (trzeciej strony) można po prostu uciskać miejsca, że ​​elementy wewnątrz .inner startu ustawiając .inner do overflow:hidden

Answer 4

To dlatego, że wysokość wynosi 100%, a następnie dodajesz 1px obramowania na każdym div .demo działa: http://codepen.io/anon/pen/VvbNXp

Więc .inner i zajęcia .Item muszą wysokość zmienione na:

height:calc(100% - 1px);