title: How to center scrollable contents on a div with dynamic height?
body: <p>I'm making a web app, and currently I'm trying to get the basic design done.
  So there should be a few columns  on the page that should be able to float on the x-axis. They are for now static in width, and the height of them is going to be 100 % of the browser window. Here is a JSFiddle: <a href="http://jsfiddle.net/qAUXQ/" rel="nofollow">http://jsfiddle.net/qAUXQ/</a></p>
  
  <p>Inside these columns, there should be contents that is centered vertically. However, if the contents of one column is higher than the browser window, there should appear a scroll bar. The problem is that since the height is dynamical, the only way I can think of (and find on Google) is to use the <code>display: table</code> method.</p>
  
  <p>The problem is that the scrollbars on the div doesn't work. So when the browser window is too small, the user simply cannot see it. It's not scrollable!</p>
  
  <p>Below is the code if you don't want to use JSFiddle:</p>
  
  <pre><code>&lt;div class="bar"&gt;
      &lt;div class="middle"&gt;
          &lt;div class="contents"&gt;
              &lt;p&gt;Lorem Ipsum&lt;/p&gt;
              &lt;p&gt;Lorem Ipsum&lt;/p&gt;
              &lt;p&gt;Lorem Ipsum&lt;/p&gt;
              &lt;p&gt;Lorem Ipsum&lt;/p&gt;
              &lt;p&gt;Lorem Ipsum&lt;/p&gt;
              &lt;p&gt;Lorem Ipsum&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
      height: 100%;
      margin: 0;
      padding: 0;
  
  }
  
  body {
      background: #f4f1ed;
  }
  
  .bar {
      height: 100%;
      border-style: solid;
      width: 360px;
      display: table;
      border-width: 0 1px;
      border-color: #ddd;
      position: absolute;
      transition: left 500ms;
      -moz-transition: left 500ms;
      -webkit-transition: left 500ms;
      -o-transition: left 500ms;
      z-index: 10;
      background: #f2f2f2;
  }
  
  .bar div.middle {
      display: table-cell;
      vertical-align: middle;
  }
  
  .bar div.contents {
      padding-left: 60px;
      overflow-y: scroll;
      overflow-x: hidden;
  }
  </code></pre>