css - Header-footer-content layout with inline-block div taking remaining space (no float or overflow: hidden) -

I have (relatively) simple layout, with content of fixed header and footer devices, two "full height" divs In display: inline-block; . Using the left div is right for navigation and real content and in this overflow-y: scroll; . The problem is that I can not set the width of the correct div to fill the remaining space. I have tried to use the float (as the last resort), but the correct div was pushed downwards and, honestly, I would not like to use floats

Is the remaining width possible in my scenario?

Simple HTML structure:

  & lt; Html & gt; I do not want to hardcode the width of the very right div. & Lt; Top & gt; & Lt; / Head & gt; & Lt; Body & lt; Div id = "container" & gt; & Lt; Div id = "header" & gt; This is the header area. & Lt; / Div & gt; & Lt; Div id = "content" & gt; & Lt; Div id = "leftContent" & gt; & Amp; Nbsp; & Lt; / Div & gt; & Lt; Div id = "textContent" & gt; & Lt; P & gt; Hello World (and other content) & lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; This is the footer area. & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt; & Lt; / Html & gt;  

CSS excerpt

  html, body {margin: 0; Padding: 0; Height: 100%; } # Container {status: relative; Margin: 0 auto; Width: 750px; Hidden flurry; Height: Auto! Important; Height: 100%; Minute-height: 100%; } #Heders {Bottom below: 1px solid black; Height: 30px; } # Content {status: absolute; Top: 31px; Bottom: 30px; Overflow-y: none; Width: 100%; } # Left content {display: inline-block; Height: 100%; Width: 200px; Border-right: 1px solid black; Vertical-align: top; } #textcontent {display: inline-block; Height: 100%; Vertical-align: top; Overflow-y: scroll; Width: 540px; / * Do not want to hardcode it * /} #footer {status: full; Width: 100%; Bottom: 0; Height: 30px; }  Edit :  
 Thank you, I was able to get what I wanted. Set up the solution  
 
  Display: Flex; Flex direction:  #content  at  and 
 
  width: 100%; Testing on IE 11 (and down in compatibility mode) generated unwanted results on  #textcontent  
 
  .  * New version can be found. 
 
 * Edit: This method works well in IE11, in IE10, the scrollbar is not visible if the content of the  #content  div is required to scroll. Layout works in IE & lt; 10 It does not work at all. 
 

You Flexbox to get it

Go through and do whatever you want

  .content {display: flex] .content & gt; Div {flex: 1 auto; }  

and beware of browser support