title: section with half screen fixed, half scroll to content. Then invert section
body: <p>Ok I am trying to create a split screen layout (with flexbox if possible) that will have one container fixed to the left half of the screen while the container on the other half of the screen that holds the article content scrolls. When the end of the content is reached, the entire section should then scroll freely into the next section, which will be the inverse of the first (fixed right, scroll with content on left. There will be four sections inverted until I reach the footer. This JSFiddle is pretty much what I am looking for, I just need to know how to inverse and add the next section so they flow as stated. </p>
  
  <p><a href="http://jsfiddle.net/avrahamcool/dtWWA/" rel="nofollow noreferrer">http://jsfiddle.net/avrahamcool/dtWWA/</a></p>
  
  <p>This is a rough outline of how each section will be laid out.</p>
  
  <p><a href="http://jsfiddle.net/QMsuD/191/" rel="nofollow noreferrer">http://jsfiddle.net/QMsuD/191/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container-main {
    background: tan;
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: flex-start;
  }
  
  #container-gray {
    background: gray;
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 50%;
    justify-content: center;
  }
  
  #container-black {
    background: black;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 50%;
    justify-content: flex-end;
  }
  
  #hello {
    background: blue;
    flex: .5;
    align-self: center;
  }
  
  #container-nav {
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  
  #how {
    background: orange;
  }
  
  #are {
    background: purple;
  }
  
  #you {
    background: pink;
  }
  
  #container-content {
    background-color: beige;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 50%;
    justify-content: flex-start;
  }
  
  .headings {
    width: 49%;
    align-self: center;
    flex: 1;
  }
  
  .articles {
    width: 85%;
    align-self: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id=container-main&gt;
    &lt;div id="container-gray"&gt;
      &lt;div id="container-black"&gt;
        &lt;p id="hello"&gt;Hello&lt;/p&gt;
        &lt;div id="container-nav"&gt;
          &lt;p id="how"&gt;How&lt;/p&gt;
          &lt;p id="are"&gt;are&lt;/p&gt;
          &lt;p id="you"&gt;you&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="container-content"&gt;
      &lt;h1 class="headings"&gt;First heading&lt;/h1&gt;
      &lt;article class="articles"&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
        nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
      &lt;/article&gt;
      &lt;h1 class="headings"&gt;Second heading&lt;/h1&gt;
      &lt;article class="articles"&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
        nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
      &lt;/article&gt;
      &lt;h1 class="headings"&gt;Third heading&lt;/h1&gt;
      &lt;article class="articles"&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
        nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
      &lt;/article&gt;
      &lt;h1 class="headings"&gt;Fourth heading&lt;/h1&gt;
      &lt;article class="articles"&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia
        nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
      &lt;/article&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>