How to center scrollable contents on a div with dynamic height?

[Chaos]

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: http://jsfiddle.net/qAUXQ/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.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!Below is the code if you don't want to use JSFiddle:\[code\]<div class="bar"> <div class="middle"> <div class="contents"> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> </div> </div></div>\[/code\]CSS:\[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\]