div nidificate che producono una barra di scorrimento. Perché?

Question

Ho 3 div annidati:

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

Il div .inner è posizione assoluta e ciascuno ha 1px confine:

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

risultati di questa disposizione in una barra di scorrimento sul div Outer.

Ecco un codepen

Perché è questo e che cosa ho bisogno di cambiare per evitare che si verifichi?

Se la larghezza del bordo del div .inner è aumentata a 3 px, la barra di scorrimento scompare. Di nuovo, perché sta succedendo questo?

Answer 1

Questo sta accadendo perché il vostro elemento .item è impostato per visualizzare come inline-block. Ciò significa che è influenzato da cose come line-height e vertical-align.

L'allineamento verticale predefinito sugli elementi inline-block è di base. Ciò significa che sono impostati per comparire sulla linea di base di qualsiasi testo che può essere inserito al suo fianco. Non sono sicuro al 100% ma penso che potrebbe esserci un problema qui dove box-sizing viene ignorato quando si effettua questo calcolo e la linea di base finisce con 2 pixel sotto dove dovrebbe essere (a causa dei 2 pixel cumulativi del bordo applicato a la parte superiore e inferiore dell'elemento).

Se si desidera che elemento di rimanere essere visualizzati in questo modo, una soluzione rapida è quella di impostare il suo vertical-align-top:

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

Codepen demo.

Answer 2

Perché si utilizza inline-block nell'elemento interno? Se si passa a bloccare il vostro rotolo scompare:

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

Answer 3

La cosa più strana è che se rimuovi overflow-x:hidden; la barra di scorrimento scompare. La ragione è che il comportamento predefinito di overflow è visible quindi se non pasticciare con essa, i risultati saranno senza barre di scorrimento, ma impostazione overflow-x ad un certo valore, imposta overflow-y-auto al posto del valore di default, che è visible e di conseguenza, viene visualizzata la barra di scorrimento.

Se si imposta overflow su auto, verrà visualizzata anche la barra di scorrimento.

D'altra parte, è impostato su inline-block quindi ha line-height che produce lo spazio sul fondo. L'impostazione di .inner a line-height:0 farà sparire lo spazio, e se lo si aumenta aumenterà pure.

D'altra (terza mano) si può solo costringere lo spazio che gli elementi all'interno .inner riprendere impostando .inner-overflow:hidden

Answer 4

E 'perché la vostra altezza è al 100%, allora si aggiunge 1px di bordo su ogni div .demo di lavoro: http://codepen.io/anon/pen/VvbNXp

Così il vostro .inner e classi .item bisogno l'altezza cambiato in:

height:calc(100% - 1px);