制作一个不会导致子元素溢出的垂直滚动父 div答案

【问题标题】：Making a vertically scrolling parent div which does not cause overflow of children制作一个不会导致子元素溢出的垂直滚动父 div
【发布时间】：2010-06-20 10:36:05
【问题描述】：

我有以下几点：

<div style="float: left; height: 20px; overflow-y: scroll">
  <div>hello this is a test</div>
  <div>hello this is another test</div>
  <div>t1</div>
  <div>t2</div>
  <div>t3</div>
</div>

父 div 增长到合适的宽度以适应最大的孩子（这是我想要的）。但是，垂直滚动条会导致内部宽度变小，从而导致最大的子项换行。

有没有办法让父级增长到最大子级的宽度+滚动条的宽度？我已经尝试了所有我知道的保证金技巧，但没有。

【问题讨论】：

您的示例对我来说很好（IE8，FF3.5.9） - 不会发生换行，尽管在 FF 中我需要将高度增加到 40px 才能看到和使用滚动条。
是的，抱歉，如果滚动条稍微高一点，示例效果会更好。我有 IE8 和 chrome，我看到的是第二个孩子有“测试”这个词溢出到下一行（而不是在一行上）。

标签： css layout scroll overflow

【解决方案1】：

找到了一种解决方案，但对任何其他建议持开放态度。

通过向最长的子元素添加一个右浮动子元素（或者，如果不确定哪个是最长的子元素，则添加到每个元素）：

<style type="text/css">
.stretcher { float: right; right: -50px; width: 50px; height: 1px; }
</style>

<div style="float: left; height: 20px; overflow-y: scroll">
  <div>hello this is a test</div>
  <div>hello this is another test<div class="stretcher"></div></div>
  <div>t1</div>
  <div>t2</div>
  <div>t3</div>
</div>

【讨论】：

【解决方案2】：

在我的 IE6/7 测试中，添加一些 水平填充 就足够了

<div style="float: left; height: 50px; overflow-y: scroll; padding: 0 50px 0 4px;">
  <div>hello this is a test</div>
  <div>hello this is another test lorem ipsum</div>
  <div>t1</div>
  <div>t2</div>
  <div>t3</div>
</div>

【讨论】：

Padding 确实适用于 IE 和 Firefox，但不适用于 Chrome 和 Safari。不过，感谢您的提示！

【解决方案3】：

我之前也遇到过同样的问题，但我认为使用 CSS 动态增加元素的大小是不可能的。但是您可以尝试使用 Javascript 动态调整高度。

在 jQuery 中，您可以在每次向父元素添加或删除子元素时使用 height() 方法。

我在我的一个项目中做到了这一点，但 Opera 仍然存在问题（IE 很好；））。但由于我们使用 Opera 的客户不多，所以我忽略了这个问题。

仅供参考：我只是略过您的问题。如果我没有正确理解您的问题，请纠正我

【讨论】：

嗨 Ashit，我的问题实际上是水平的，而不是垂直的。我希望父元素水平拉伸以适应所有子元素而不包裹它们，如果有很多子元素，则显示垂直滚动条。