css - 当滚动条出现时，行内 block 元素会发生碰撞

Question

我有一个充满选项的选项框，如下所示:

<div class="OptionBox">
  <div class="Option">
    <div class="AddRemoveIcon"></div>
    <img src="images/users/user_1000000002.jpg">
    <span class="Label">Student Name<span class="SubLabel">Student</span></span>
  </div>
  <div class="Option">...</div>
</div>

样式是这样的:

.OptionBox{
  overflow: auto;
  max-height: 200px;
  max-width:300px;
  display: inline-block;
}

.Option {
  display: block;
}

.Option .AddRemoveIcon,
.Option img,
.Option .Label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

我正在使用内联 block ，因为我喜欢垂直对齐:中间，并且 SubLabel 跨度并不总是存在...但是 float:left 也会出现此问题...

我的问题是当我在选项框中有足够多的选项时导致溢出。无论出于何种原因，浏览器都会正确调整大小(即计算每个选项的宽度并相应地调整选项框的宽度)，然后添加滚动条。结果是最宽的选项的 Label div 下移了一行，因为滚动条从选项框的宽度中删除了 X 像素。当我为一个选项的子级切换到 float:left 时，Label div 会根据滚动条换行。在任何一种情况下， .OptionBox 都不会被推到最宽选项的最佳宽度。包装应该只在达到最大宽度时发生，对吗？ Here's a fiddle of it .

我所追求的——我确定我是在求月亮——要么是一种重新定位滚动条的方法，这样它们就不会占用 OptionBox 的宽度，要么是一些神奇的 CSS 规则，它告诉浏览器在调整大小时考虑滚动条(有点像 box-sizing:border-box 告诉浏览器在设置元素宽度时考虑填充/边框)。

有什么想法吗？提前致谢!

Answer 1

您应该能够通过将最外层的 div 设置为 overflow: hidden 来解决此问题。这样你就不会得到 y 溢出并且不会出现滚动条。 我很确定我看到了一些 css 来防止滚动条在没有这个的情况下出现，但是在 atm 上找不到它。