Why doesn't this uibinder page have a vertical scrollbar? - gwt

Question

I want the browser to show a vertical scrollbar when the content grows larger than the page. The content and footer disappear below the screen instead of showing a vertical scroll bar (like we see on the SO home page).
I asked a similar question earlier, but it was directed at why the page footer wouldn't expand as the content grew. I got that sorted out but now the footer moves south but a page scrollbar never shows up.
My UiBinder xml is as follows (here's a link to the file):
<g:DockLayoutPanel unit='PX' styleName="{style.shellStyles.wrap}">
<g:north size='180'>
<g:HTMLPanel styleName='{style.shellStyles.header}'>
<div id="login" class="{style.shellStyles.login}">
<g:InlineLabel ui:field="loggedInUser"/>
<g:InlineHyperlink ui:field="loginLogoutLink"/>
</div>
<h1>Flash Cards Application</h1>
</g:HTMLPanel>
</g:north>
<g:center>
<g:FlowPanel>
<g:HTMLPanel styleName='{style.shellStyles.content}'>
<g:SimplePanel styleName='{style.shellStyles.left}' ui:field="navigationPanel" />
<g:SimplePanel styleName='{style.shellStyles.right}' ui:field='contentPanel' />
<div style="clear: both;" ></div>
</g:HTMLPanel>
<g:HTMLPanel styleName="{style.shellStyles.footer}" height="70">
<g:Label>© Copyright by Justin Robbins</g:Label>
</g:HTMLPanel>
</g:FlowPanel>
</g:center>
Excerpt of CSS is as follows (here's a link to the full CSS):
.wrap {
width: 820px;
margin: 20px auto 10px auto;
}
#sprite .header {
gwt-image: "headerImage";
background-color: #efefef;
height: 180px;
}
#sprite .content {
gwt-image: "contentImage";
background-color: #efefef;
padding: 10px 40px 20px 20px;
min-height: 500px;
}
.left {
width: 210px;
float: left;
}
#sprite .left h4 {
gwt-image: "sidebarImage";
padding: 0 0 0 10px;
height: 50px;
line-height: 50px;
color: #fff;
}
.right {
width: 530px;
float: right;
padding-top: 10px;
padding-right: 60px;
}
#sprite .footer {
gwt-image: "footerImage";
background-color: #efefef;
height: 70px;
line-height: 70px;
color: #fff;
text-align: center;
}
*{margin:0; padding:0;}
body {
font-family: Arial;
font-size: 12px;
background: #efefef;
color: #232323;
margin:0;
padding:0;
line-height: 150%;
}

Answer 1

Wrap your Flowpanel in the content area with ScrollPanel and set its height. You will get the scroll

Answer 2

You are using a Layout-based panel as your root element, hence it will always fit the whole page and if you resize the browser window, everything will resize accordingly (if you've used ProvidesResize/RequiresResize widget down the road).
If the content you know it will grow, simply wrap it into a ScrollLayoutPanel, or set the first FlowPanel of the <center> element to have overflow (it's ugly as you will see).
You also probably want the footer to be always visible, so why not moving that into the region of the main DockLayoutPanel?
I suggest you to give a read here.