Verschachtelte divs, die eine Bildlaufleiste erzeugen. Warum?

Question

Ich habe 3 verschachtelten divs:

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

Die .inner div Position absolut und sie haben jeweils 1px Grenze:

.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; 
} 

Diese Anordnung führt zu einer Bildlaufleiste am .outer div.

Hier ist ein codepen

Warum das so ist und was muss ich es passiert zu stoppen ändern?

Wenn die Breite der Umrandung des .inner div auf 3px erhöht wird, wird die Bildlaufleiste entfernt. Warum passiert das wieder?

Answer 1

Dies geschieht, weil Ihr .item Element eingestellt ist als inline-block angezeigt werden soll. Dies bedeutet, dass es von Dingen wie line-height und vertical-align betroffen ist.

Die standardmäßige vertikale Ausrichtung auf inline-block Elementen ist Baseline. Dies bedeutet, dass sie so eingestellt sind, dass sie in der Basiszeile eines beliebigen Textes erscheinen, der daneben eingegeben werden kann. Ich bin mir nicht 100% ig sicher, aber ich denke, dass hier ein Problem auftreten kann, bei dem box-sizing ignoriert wird, und die Grundlinie endet 2 Pixel darunter, wo es sein sollte (aufgrund der kumulativen 2 Pixel Rand angewendet auf die Ober- und Unterseite des Elements).

Wenn Sie das Element wollen diese Art und Weise wird angezeigt bleiben, eine schnelle Lösung setzen seine vertical-align-top:

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

Codepen demo.

Answer 2

Warum verwenden Sie inline-block im inneren Element? Wenn Sie zu blockieren Ihre Scroll ändern verschwindet:

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

Answer 3

Die seltsamste Sache ist, dass wenn Sie overflow-x:hidden; entfernen die Bildlaufleiste weggeht. Der Grund dafür ist, dass das Standardverhalten von overflow ist visible also, wenn Sie nicht mit ihm verwirren tun, werden die Ergebnisse keine Scrollbalken sein, aberoverflow-x bis zu einem gewissen Wert, setzt overflow-y-auto anstelle des Standardwertes, die visible ist und Als Ergebnis wird die Bildlaufleiste angezeigt.

Wenn Sie overflow auf auto setzen, wird auch die Bildlaufleiste angezeigt.

Auf der anderen Seite ist .item auf inline-block gesetzt, so dass es line-height hat, die den Raum auf der Unterseite produziert. Die Einstellung auf line-height:0 wird den Raum verschwinden lassen, und wenn Sie ihn vergrößern, wird er auch zunehmen.

Auf der anderen (dritte Hand) können Sie den Raum nur einengen können, dass die Elemente innerhalb .inner Nehmen durch .inner-overflow:hidden

Answer 4

Einstellung Es ist, weil Ihre Höhe 100% ist dann sind Sie 1px der Grenze auf jedem div Hinzufügen .Arbeits Demo: http://codepen.io/anon/pen/VvbNXp

So Ihre .inner und .item Klassen müssen die Höhe geändert:

height:calc(100% - 1px);