Content overflows instead of expainding div - html

Question

I've been struggling with this for the past day and I can't seem to understand (nor fix) this problem.
The problem is that the content overflows the "sidebar" div instead of expanding it, when there's less "main" content than "sidebar" content. (As you can see in the following image).
Here's a JSFiddle!
The #sidebar is position: absolute; since I'm using left: 0; and left: -200; to show and hide the sidebar. The #sidebar-handle is also crucial as I have a click event listener and a hover animation connected to it, for the purpose of toggling show and hide for the #sidebar. (When toggling show and hide I also do change the margin-left of #main.
Does anybody have a solution?
I'm of course searching for a pure CSS solution and a solution which works in the major browsers.
CSS
html, body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
color: #333;
background-color: #EEE;
}
#container {
height: 100%;
min-height: 100%;
}
#header {
height: 50px;
background-color: #303030;
-webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
}
#header-content {
height: 100%;
}
#sidebar {
width: 210px;
min-height: 100%;
position: absolute;
left: 0;
top: 50px;
bottom: 0;
background-color: #404040;
-webkit-box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
box-shadow: 3px 4px 10px rgba(0, 0, 0, 0.5);
}
#sidebar-content {
width: 200px;
position: absolute;
left: 0;
}
#sidebar-handle {
width: 10px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: #303030;
border-left: 1px solid #272727;
}
#main {
margin-left: 210px;
padding: 30px;
}
ul {
margin: 0;
padding-left: 0;
list-style: none;
}
li {
margin: 0;
margin-top: 16px;
background-color: #AAA;
}
p {
margin-top: 0;
}
HTML
<div id="container">
<div id="header">
<div id="header-content"></div>
</div>
<div id="content">
<div id="sidebar-container">
<div id="sidebar">
<div id="sidebar-content">
<ul>
<!-- lots of li tags for testing -->
</ul>
</div>
<div id="sidebar-handle"></div>
</div>
</div>
<div id="main">
<!-- some random content for testing -->
</div>
</div>
</div>

Answer 1

Remove the bottom: 0 from the sidebar, that limits it to the height of the window.
Remove the absolute positioning on the sidebar-content, so that it's not taken out of the flow. That way it can affect the size of the sidebar.
Demo: http://jsfiddle.net/Guffa/gfu1snhm/3/
I don't know if this has some unwanted effect in some other situation, but it solves this situation, and should help you see why it does what it does.

Answer 2

Remove the line with absolute and set margin:0;