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

Question

我有 3 个嵌套的 divs:

<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

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

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

Answer 2

发生这种情况是因为您的 .item 元素设置为显示为 inline-block。这意味着它受到 line-height 和 vertical-align.

等因素的影响

inline-block 元素的默认垂直对齐方式是基线。这意味着它们被设置为出现在可能与其一起输入的任何文本的基线处。我不是 100% 确定，但我认为这里可能存在一个问题，在进行此计算时 box-sizing 被忽略，并且基线最终比应有的位置低 2 个像素（由于累计 2 个像素应用于元素顶部和底部的边框）。

如果您希望该元素继续以这种方式显示，快速解决方法是将其 vertical-align 设置为 top:

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

Codepen demo.

Answer 3

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

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

另一方面，.item 设置为 inline-block，因此它具有 line-height，从而在底部生成 space。将 .inner 设置为 line-height:0 会使 space 消失，如果你增加它也会增加。

另一方面（第三手）您可以通过将 .inner 设置为 overflow:hidden

来限制 .inner 中的元素所采用的 space

Answer 4

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

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

height:calc(100% - 1px);

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

Nested divs producing a scrollbar. Why?

html

css

border-box