Вложенные divs, создающие полосу прокрутки. Зачем?

Question

У меня есть 3 вложенных дивы:

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

.inner ДИВ позиция абсолютная и каждый из них имеет 1px границы:

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

результатов Такого расположения в виде скроллинга Космических дел.

Вот codepen

Почему это и что мне нужно изменить, чтобы остановить это происходит?

Если ширина границы .inner div увеличена до 3 пикселей, тогда полоса прокрутки исчезнет. Опять же, почему это происходит?

Answer 1

Это происходит потому, что ваш .item элемент установлен для отображения в качестве inline-block. Это означает, что на него оказывают влияние такие вещи, как line-height и vertical-align.

По умолчанию вертикальное выравнивание по элементам inline-block является исходным. Это означает, что они должны появляться на базовой строке любого текста, который может быть введен рядом с ним. Я не уверен на 100%, но я думаю, что здесь может возникнуть проблема, когда box-sizing игнорируется при выполнении этого расчета, а базовая линия заканчивается на 2 пикселя ниже, где она должна быть (из-за кумулятивных 2 пикселей границы, применяемых к верх и низ элемента).

Если вы хотите, чтобы элемент оставаться отображается таким образом, быстро исправить, чтобы установить его vertical-align в top:

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

Codepen demo.

Answer 2

Почему вы используете inline-block во внутреннем товаре? Если вы изменяете, чтобы заблокировать ваш свиток исчезает:

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

Answer 3

Самое странное, что если вы удалите overflow-x:hidden;, полоса прокрутки исчезнет. нет Причина заключается в том, что поведение по умолчанию overflow является visible, таким образом, если вы не связывайтесь с ней, результаты будут не скроллбары, но настройки overflow-x до некоторого значения, устанавливает overflow-y в auto вместо значения по умолчанию, который visible и в результате появляется полоса прокрутки.

Если вы установили overflow на номер auto, появится полоса прокрутки.

С другой стороны, .item установлен в inline-block, поэтому он имеет line-height, который создает пространство внизу. Установка .inner на line-height:0 приведет к исчезновению пространства, и если вы увеличите его, оно также увеличится.

С другой (третьей стороны), вы можете просто сужают пространство, что элементы внутри .inner, задавая .inner к overflow:hidden

Answer 4

Это потому, что ваш рост 100%, то вы добавляете 1px бордюра на каждом DIV ,Работа демо: http://codepen.io/anon/pen/VvbNXp

Так что ваш .inner и .item классы должны высота изменены:

height:calc(100% - 1px);