title: Flex Layout with fixed position (no scrolling) sidebar
body: <p>I have a layout with left and right canvas sidebars, enclosing the Main content area in the middle.</p>
  
  <p>The sidebars and main content are flex items, positioned in a flex layout left to right.</p>
  
  <p>The sidebars contain menus and meta links.</p>
  
  <p>My question is: when scrolling the content area, is it possible to leave the sidebars in fixed position, such that they stay in top position and do not scroll down?</p>
  
  <p>JS Fiddle: <a href="http://jsfiddle.net/Windwalker/gfozfpa6/2/" rel="noreferrer">http://jsfiddle.net/Windwalker/gfozfpa6/2/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="flexcontainer"&gt;
      &lt;div class="flexitem" id="canvas-left"&gt;
          &lt;p&gt;This content should not scroll&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="flexitem" id="content"&gt;
          &lt;div&gt;
              &lt;p&gt;Scrolling Content&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="flexitem" id="canvas-right"&gt;
          &lt;p&gt;This content should not scroll&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.flexcontainer {
      display: flex;
      flex-direction: row;
      min-height: 100%;
      align-items: stretch;
  }
  .flexitem {
      display: flex;
  }
  #canvas-left {
      background: yellow;
      order: -1;
      flex: 0 0 57px;
  }
  #content {
      background: green;
      order: 1;
      padding: 1rem;
  }
  #content div {
      display: block;
  }
  #canvas-right{
      background: blue;
      order: 2;
      flex: 0 0 57px;
  }
  </code></pre>