html - Responsive grid layout with fixed header, footer and scrollable content

Question

I'm trying to create 2 column full height design by using flexbox. When I add scrolling to whole middle part then I have a strange behavior. It seems that flex-grow/stretch doesn't grow/stretch other items if parent container has a scrollbar.

Here is my fiddle. Code also given below:

html, body {
    height: 100%;    
}
#container {
    display: flex;
    flex-direction: column;
    height: 100%;
    
    width: 50%;
    background-color: red;
}

#container header {
    background-color: gray;
}
#container section {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px;
}
#container footer {
    background-color: gray;
}
aside {
  width : 100px;
  background-color: blue;
}
article{
  width: 100%;
  display:flex;
  flex-direction: column;
}
article > div{
  flex: 1 1 auto;
}

#content {
  display:flex;   
}

<section id="container" >
<header id="header" >This is a header</header>
<section id="content">
  <aside>
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
    test<br />
  </aside>
  <article id="article" >
    <div>               
      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 />
    </div>
    <footer id="footer" >This is a page footer</footer>      
  </article>
</section>
<footer id="footer" >This is a footer</footer>
</section>

Answer 1

To make this layout work in latest Firefox & Chorme as of today (revising this answer from 2016), I made the following changes:

1. Added margin: 0 to body to allow the container to flex to the viewport height.

2. Wrap you the contents on #content element in another section and make it a column flexbox.

3. Make the inner sectiona full-height flexbox and give min-height: max-content and flex: 1.

See demo below:

html,
body {
  height: 100%;
  margin: 0; /* ADDED */
}

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  background-color: red;
}

#container header {
  background-color: gray;
}

#container > section { /* ADDED > selector */
  display: flex; /* ADDED */
  flex-direction: column; /* ADDED */
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0px;
}

#container > section > section{ /* ADDED */
  display: flex;
  height: 100%;
  min-height: max-content; /* fixes chrome */
  flex: 1; /* fixes firefox */
}

#container footer {
  background-color: gray;
}

aside {
  width: 100px;
  background-color: blue;
  min-height: content;
}

article {
  width: 100%;
  display: flex;
  flex-direction: column;
}

article>div {
  flex: 1 1 auto;
}

<section id="container">
  <header id="header">This is a header</header>
  <section id="content">
    <section>
      <aside>
        test<br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br /> test
        <br />
      </aside>
      <article id="article">
        <div>
          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 />
        </div>
        <footer id="footer">This is a page footer</footer>
      </article>
    </section>
  </section>
  <footer id="footer">This is a footer</footer>
</section>