Div expanding with overflow/scrollbars after other divs height

I need to do a website with divs. See the code snippet for the format. The MENU is of variable height, depending if the menu-items is rolled out or not, and the content is of variable height as well, but with a minimum of 700px. If the MENU is folded together to its min-height, it is 300px, and the BOX should take up the remaining space so MENU+BOX is the same height as the CONTENT. The content of BOX is 600px, so when BOX only gets 400px, there should be scrollbars. When the CONTENT div expands, the BOX should expand as well, so they stay the same height.

Here's what i got so far, but it is not working properly. I've tried some other stuff, but deleted it for this post so I only get the points shown instead. Hope you can help, and thank you in advance!

#container{ width: 800px; }
#leftbar{ float: left; width: 250px; backgrou开发者_运维百科nd-color: lightgray; }
#content { float: left; width: 550px; background-color: white; }
#menu { width: 250px; }
#box { width: 250px; height: 300px; overflow-y: scroll; }

<div id="container">
  <div id="leftbar">
    <div id="menu">
    <div id="box">
  </div>
  <div id="content"></div>
</div>
<div style="clear:both;"></div>

hi at the first look i can see you have some unclosed div tags, and probably that's why it doesn't do what you want. You can assign scroll bars by using java script, if you set overflow from the css it will have a scroll bar from the beginning