I Need Scrollbar On Inner Element, Not Browser Window (viewport)

In the code below, how do I make the article container auto grow to consume the remaining vertical space below it, but the scroll bar to remain only for that element. In other word

Solution 1:

You can try setting position:fixed to your outer container (http://jsfiddle.net/ch7n6/909/):

#outer_container{
display:flex;
flex-direction:row;
top:0;
bottom:0;
position:fixed;
}

If it doesn't work for your design, you can change the container dimensions using window.onresize event.

Solution 2:

In your code you commented out:

html, body {
  //height: 100%;    
}

But I think you were on the right track.

By uncommenting that rule, and adding height: 100% to .outer_container, your layout may be complete.

Try this:

html, body {
  height: 100%;                   /* uncommented */margin: 0;                      /* removes default margin */
}
#outer_container {
  height: 100%;                   /* new; see details below */display: flex;
  flex-direction: row;
}
#outer2 {
  flex: 10 auto;
  background-color: lightblue;     /* just for demo */
}
#outer1 {                          /* correction to duplicate ID */flex: 10 auto;
  background-color: lightgreen;    /* just for demo */
}
#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  background-color: red;
}
#containerheader {
  background-color: gray;
}
#containerarticle {
  flex: 11 auto;
  overflow-y: auto;
  height: 0px;
}
#containerfooter {
  background-color: gray;
}

<divid="outer_container"><divid="outer1"><h2>Outer 1</h2></div><sectionid="container"><headerid="header">This is a header</header><articleid="content">
      This is the content that
      <br />With a lot of lines.
      <br />With a lot of lines.
      <br />This is the content that
      <br />With a lot of lines.
      <br /><br />This is the content that
      <br />With a lot of lines.
      <br /><br />This is the content that
      <br />With a lot of lines.
      <br /></article><footerid="footer">This is a footer</footer></section><divid="outer2"><h2>Outer 2</h2></div></div>

jsFiddle

To understand how this solution works, and what may have held you up, take a look at these posts:

• Working with the CSS height property and percentage values
• Chrome / Safari not filling 100% height of flex parent