İç içe geçen div'ler kaydırma çubuğu üretiyor. Niye ya?

Question

Ben 3 iç içe renklendirilmiş:

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

.inner div pozisyon mutlaktır ve her 1px sınır vardır: omuza Dış div üzerinde kaydırma çubuğunda

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

Bu düzenleme sonucu.

İşte Neden bu ve ben bu oluyor durdurmak için değiştirmek için ne gerekiyor bir codepen

var?

.inner div sınırının genişliği 3 piksele yükseltilirse, kaydırma çubuğu kaybolur. Yine, bu neden oluyor?

Answer 1

. Bu, line-height ve vertical-align gibi şeylerden etkilendiği anlamına gelir.

inline-block öğelerinde varsayılan dikey hizalama temel değerdir. Bu, yanlarında girilebilecek herhangi bir metnin taban çizgisinde görünecek şekilde ayarlanmış oldukları anlamına gelir. % 100 emin değilim ama bu hesaplama yapılırken burada box-sizing'un göz ardı edildiği bir konu olabileceğini düşünüyorum ve taban çizgisi, olması gereken 2 pikselin altında olmak üzere biter. elemanın üstü ve altı). O elemanın bu şekilde görüntülenen kalmasını istiyorsanız

, hızlı bir düzeltme ayarlamaktır onun vertical-aligntop için:

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

Codepen demo.

Answer 2

İç öğede neden inline-block kullanıyorsunuz? Engellemek değiştirirseniz sizin kaydırma kaybolur: En .item eleman bir inline-block olarak görüntüleyecek şekilde ayarlanmış olduğundan bu oluyor

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

Answer 3

En garip olan şey, overflow-x:hidden;'u kaldırırsanız kaydırma çubuğunun kaybolmasıdır. nedeni overflow varsayılan davranışı onunla uğraşma eğer böylece visible olmasıdır, sonuç setleri, bazı değere overflow-x ayarı hiçbir çubukları, ama olacak overflow-y yerine visible olduğu varsayılan değerin auto ve Sonuç olarak, kaydırma çubuğu belirir.

overflow değerini auto olarak ayarlarsanız, kaydırma çubuğu da görüntülenir.

Diğer taraftan, .item, inline-block olarak ayarlanmıştır, bu nedenle line-height adresinde altta boş alan üretilmektedir. .inner'un line-height:0'a ayarlanması, alanın kaybolmasını sağlar ve artırırsanız, o da artacaktır.

diğer (üçüncü el) Açık

sadece alandan daraltır ki overflow:hidden

Answer 4

her div üzerinde sınırın 1px ekliyoruz yükseklik sonra% 100'dür da ondan hiç .inner ayarlayarak .inner take içindeki elementler .Çalışma demo: http://codepen.io/anon/pen/VvbNXp

Yani .inner ve .item sınıflar yüksekliği değişti gerekir için:

height:calc(100% - 1px);