Creating a vertical scrollable parent div that does not cause overflow of children

Question

I have something like the following:

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

The parent div grows to the appropriate width to fit the largest child (which is exactly what I want). However, the vertical scroll bar causes the inner width to be smaller, which causes the largest child to wrap.

Is there a way to make a parent grow to the width of the largest child + the width of the scroll bar? I tried every marker trick that I know, but nothing.

Answer 1

Found one solution, but open to any other suggestions.

(, , , ):

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

FYI: I just looked through your question. Please correct me if I do not understand your problem correctly