Making a vertically scrolling parent div which does not cause overflow of children

Question

I have something as follows:

<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 what I want). However, the vertical scrollbar causes the inner width to be smaller, which causes the largest child to wrap.

Is there a way to get the parent to grow to the width of the largest child + the width of the scroll bar? I've tried every margin trick I know, but nothing.

Answer 1

Found one solution, but open to any other suggestions.

By adding a right-float child to the longest child (or, if unsure which is the longest child, to every element):

<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

Adding some horizontal padding is sufficient in my tests with 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

I had the same issue earlier but I dont think its possible to increase the size of an element dynamically using CSS. But what you can try is adjusting the height dynamically using Javascript.

In jQuery you can use height() method everytime you add or remove a child element to the parent.

I did this in one of my projects but it still had issues with Opera (IE was fine ;) ). But since we don't have many clients using Opera, I ignored the issue.

FYI: I just skimmed thru your question. Please correct me if I didn't understand your problem properly

Answer 4

Hi, sorry I was skimming thru all the queries quickly so misunderstood your query.

anyways, since you have give overflow-y = scroll, it will always show the vertical scroll bar. Try giving right padding (approx equal to the width of scroll bar) to the parent div.

I am not an expert in CSS so I usually do trial and error.

HTH.

Good Luck :)