Variable height HTML element with horizontal hidden overflow CSS

Question

I need to hide horizontal overflow of a html element but not the vertical overflow. So assume I have the following 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>

The CSS I wanted to use was something like:

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

The problem I have is that the element div.container will have zero height because I have not defined a height in the CSS. However the height of the content in the container could be variable and therefore I cannot set a specific height.

I could use JavaScript to dynamically set the height of the element but I would like to avoid doing this.

Answer 1

Maybe you can experiment with clip? I have no experience with it so you would have to try out.

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

there are overflow-x and overflow-y properties but only in CSS3. FF interprets them correctly already, though, as far as I know.

Answer 2

Since there is no height (it is a variable), Y axis will not overflow, there is no need for it. Container will simply expand on Y as much as it needs to fit inner content, so even if you force overflow visibility with overflow:visible;or overflow-y:visible; it will be without scrollbar.

If you need to get vertical overflow you must, at least, specify max-height:<value>.<units>; & overflow-y:auto; overflow-x:hidden;, so that, if content overflows on Y axis, it displays a scrollbar.