div lồng nhau tạo ra một thanh cuộn. Tại sao?

Question

Tôi có 3 divs lồng nhau:

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

Các div .inner là vị trí tuyệt đối và họ từng có 1px biên giới:

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

kết quả sắp xếp này trong một thanh cuộn trên div .outer.

Dưới đây là một codepen

Tại sao điều này và những gì tôi cần phải thay đổi để ngăn chặn nó xảy ra?

Nếu chiều rộng của đường viền của div .inner được tăng lên 3px thì thanh cuộn sẽ biến mất. Một lần nữa, tại sao điều này lại xảy ra?

Answer 1

này đang xảy ra bởi vì yếu tố .item của bạn được thiết lập để hiển thị như một inline-block. Điều này có nghĩa là nó bị ảnh hưởng bởi những thứ như line-height và vertical-align.

Căn chỉnh theo chiều dọc mặc định trên inline-block yếu tố là đường cơ sở. Điều này có nghĩa là chúng được đặt để xuất hiện ở dòng cơ bản của bất kỳ văn bản nào có thể được nhập cùng với nó. Tôi không chắc chắn 100% nhưng tôi nghĩ rằng có thể có vấn đề ở đây, trong đó box-sizing bị bỏ qua khi thực hiện phép tính này và dòng cơ sở sẽ kết thúc bằng 2 pixel bên dưới vị trí cần thiết (do 2 đường viền tích lũy được áp dụng cho phần trên và dưới của phần tử).

Nếu bạn muốn yếu tố đó vẫn được hiển thị theo cách này, cách khắc phục nhanh chóng là để thiết lập của nó vertical-align-top:

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

Codepen demo.

Answer 2

Tại sao bạn sử dụng inline-block trong mục bên trong? Nếu bạn thay đổi để chặn cuộn của bạn biến mất:

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

Answer 3

Điều kỳ lạ nhất là nếu bạn xóa overflow-x:hidden; thanh cuộn sẽ biến mất. Lý do là hành vi mặc định của overflow là visible do đó nếu bạn không gây rối với nó, kết quả Sẽ không có thanh cuộn, nhưng thiết overflow-x một số giá trị, đặt overflow-y-auto thay vì giá trị mặc định đó là visible và kết quả là thanh cuộn xuất hiện.

Nếu bạn đặt overflow thành auto thanh cuộn cũng sẽ xuất hiện. Mặt khác, .item được đặt thành inline-block để nó có line-height tạo ra không gian ở phía dưới Đặt .inner thành line-height:0 sẽ làm cho không gian biến mất và nếu bạn tăng nó cũng sẽ tăng lên.

Mặt khác (tay thứ ba), bạn chỉ có thể co không gian mà các yếu tố bên trong .inner mất bằng cách thiết lập .inner-overflow:hidden

Answer 4

Đó là bởi vì chiều cao của bạn là 100% thì bạn đang thêm 1px biên giới trên mỗi div .bản demo làm việc: http://codepen.io/anon/pen/VvbNXp

Vì vậy .inner của bạn và các lớp .item cần chiều cao thay đổi để:

height:calc(100% - 1px);