嵌套 div 生成滚动条。为什么？

Question

我有 3 个嵌套的 div：

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

.inner div 是绝对位置，它们每个都有 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;
}

这种排列会在 .outer div 上产生一个滚动条。

这是codepen

为什么会这样？我需要改变什么来阻止它发生？

如果 .inner div 的边框宽度增加到 3px，那么滚动条就会消失。再说一遍，为什么会这样？

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

最奇怪的是，如果你删除overflow-x:hidden;，滚动条就会消失。原因是overflow 的默认行为是visible，因此如果你不弄乱它，结果将没有滚动条，但是将overflow-x 设置为某个值，设置@ 987654325@ 到 auto，而不是默认值 visible，因此会出现滚动条。

如果您将overflow 设置为auto，滚动条也会出现。

另一方面，.item 设置为inline-block，所以它有line-height，它在底部产生空间。将.inner设置为line-height:0会使空间消失，如果增加它也会增加。

另一方面（第三只手），您可以通过将.inner 设置为overflow:hidden 来限制.inner 中的元素占用的空间

Answer 3

为什么你在内部项目中使用inline-block？如果你改变阻止你的滚动消失：

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

Answer 4

这是因为你的高度是 100%，然后你在每个 div 上添加了 1px 的边框。工作演示：http://codepen.io/anon/pen/VvbNXp

所以您的 .inner 和 .item 类需要将高度更改为：

height:calc(100% - 1px);