Question

我有以下内容：

<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增长到适当的宽度以适应最大的孩子（这就是我想要的）。但是，垂直滚动条会导致内部宽度变小，从而导致最大的子项包裹。

有没有办法让父级增长到最大子级的宽度+滚动条的宽度？我已经尝试过我所知道的每一个边缘技巧，但没有。

Answer 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>

Answer 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>

Answer 3

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

在jQuery中，每次向父级添加或删除子元素时都可以使用height（）方法。

我在我的一个项目中做过这个但是它仍然存在Opera的问题（IE很好;））。但由于我们没有很多客户使用Opera，我忽略了这个问题。

仅供参考：我刚刚通过你的问题撇去了。如果我不能正确理解你的问题，请纠正我

制作垂直滚动的父div，不会导致孩子溢出

3 个答案: