Создание родительского 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 увеличивается до соответствующей ширины, чтобы соответствовать наибольшему дочернему элементу (что я и хочу). Однако вертикальная полоса прокрутки приводит к уменьшению внутренней ширины, что приводит к переносу самого большого дочернего элемента.

Есть ли способ увеличить родительский элемент до ширины наибольшего дочернего элемента + ширины полосы прокрутки? Я перепробовал каждый маржинальный трюк, но ничего не знаю.

Answer 1

Добавление некоторых горизонтальных отступов достаточно в моих тестах с 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 2

У меня раньше была такая же проблема, но я не думаю, что возможно динамически увеличивать размер элемента с помощью CSS. Но то, что вы можете попробовать, это динамически регулировать высоту с помощью Javascript.

В jQuery вы можете использовать метод height () каждый раз, когда добавляете или удаляете дочерний элемент для родителя.

Я сделал это в одном из моих проектов, но у него все еще были проблемы с Opera (IE был в порядке;)). Но поскольку у нас мало клиентов, использующих Opera, я проигнорировал эту проблему.

К вашему сведению: я только что прочитал ваш вопрос. Пожалуйста, поправьте меня, если я не правильно понял вашу проблему

Answer 3

Нашли одно решение, но открыты для любых других предложений.

Путем добавления правого плавающего дочернего элемента к самому длинному дочернему элементу (или, если не уверен, какой из них является самым длинным дочерним элементом, к каждому элементу):

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