HTML-элемент переменной высоты с горизонтальным скрытым переполнением CSS

Question

Мне нужно скрыть горизонтальное переполнение HTML-элемента, но не вертикальное переполнение. Итак, предположим, у меня есть следующий HTML:

<div class="container">
  <div class="inner">
    <p>content 1</p>
  </div>
  <div class="inner">
    <p>content 2</p>
    <p> and then some more stuff</p>
  </div>
</div>

CSS, который я хотел использовать, был что-то вроде:

.container{
  overflow:hidden;
  width:100px;
}
.inner{
  width:200px;
}

У меня проблема в том, что элемент div.container будет иметь нулевую высоту, потому что я не определил высоту в CSS. Однако высота содержимого в контейнере может быть переменной, и поэтому я не могу установить конкретную высоту.

Я мог бы использовать JavaScript для динамической установки высоты элемента, но я бы хотел избежать этого.

Answer 1

Поскольку высоты нет (это переменная), ось Y не будет переполнена, в этом нет необходимости. Контейнер будет просто расширяться на Y столько, сколько ему нужно, чтобы вместить внутреннее содержимое, поэтому даже если вы заставите видимость переполнения с помощью overflow:visible; или overflow-y:visible;, он будет без полосы прокрутки.

Если вам нужно получить вертикальное переполнение, вы должны , по крайней мере, указать max-height:<value>.<units>; & overflow-y:auto; overflow-x:hidden;, чтобы при переполнении содержимого по оси Y отображалась полоса прокрутки.

Answer 2

Может быть, вы можете поэкспериментировать с клипом ? У меня нет опыта с этим, поэтому вам придется попробовать.

.container
  {
    clip:rect(0px, 100px, auto, 0px);
   }

есть свойства overflow-x и overflow-y, но только в CSS3. Впрочем, ФФ правильно их интерпретирует, насколько я знаю.