css - 制作一个不会导致 child 溢出的垂直滚动的父div

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 增长到适当的宽度以适应最大的子级(这是我想要的)。然而，垂直滚动条导致内部宽度变小，从而导致最大的 child 换行。

有没有办法让parent增长到最大child的宽度+滚动条的宽度？我尝试了所有我知道的 margin 技巧，但一无所获。

Answer 1

找到了一个解决方案，但愿意接受任何其他建议。

通过向最长的 child 添加一个右浮动的 child (或者，如果不确定哪个是最长的 child ，则添加到每个元素):

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