title: overflow:hidden and % height
body: <p>I am creating a page where I do not want any fixed px height and also use overflow:hidden.</p>
  
  <p>My HTML is of the form;</p>
  
  <pre><code>&lt;div class="scrollable fl"&gt;
  ...Some content
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is defined as;</p>
  
  <pre><code>.scrollable {
      border-color: #CCCCCC;
      border-style: solid;
      border-width: 1px;
      height: 100%;
      overflow: hidden;
      position: relative;
      width: 100%;
  }
  </code></pre>
  
  <p>Also just to add, I have given overflow:hidden (with float:left as well for some parent) to all the parent/ancestor divs of scrollable ..</p>
  
  <p>Now the issue is that the scrollable div is not expanding as per it's content if I give height as 100% (It does for fixed px height...But I do not have that option since I am designing a completely fluid layout)</p>
  
  <p>I tried 2 things from my side which did not work;
  1. Keeping height chain alive (i.e. giving 100% height to all parent/ancestor divs of scrollable .
  2. Trying with height:auto for scrollable </p>
  
  <p>How do I fix this issue?</p>