title: set the overflow:auto with height 100%
body: <p>In my page, I have an element which has a height of 100% based on its parent; however, I want this element to auto scroll vertically when necessary. This is <a href="http://jsfiddle.net/qng67/" rel="noreferrer">my example</a>.</p>
  
  <p>I can not make it.</p>
  
  <p>I have added the following css:</p>
  
  <pre><code>height:100%;
  max-height:100%;
  </code></pre>
  
  <p>In fact, what I want is to make sure that the <code>.content</code> is always inside the <code>.container</code>. Like this:</p>
  
  <p><img src="https://i.stack.imgur.com/GhAhV.png" alt="pic."></p>
  
  <p>(BTW, in the above image, I use the <code>max-height:400px</code> which should be avoided since the maximum height of it should be based on the height of <code>.container</code>)</p>
  
  <p>Any ideas?</p>