title: flexbox three column layout with scrollable content works in Chrome but broken in IE
body: <p>I have tried to create a page layout with three scrolling columns with flexbox.</p>
  
  <p>Google Chrome displays the result nicely:</p>
  
  <p><a href="https://i.stack.imgur.com/aoKhP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aoKhP.png" alt="enter image description here"></a></p>
  
  <p>but Edge or Internet Explorer behave differently:</p>
  
  <p><a href="https://i.stack.imgur.com/2Nc9Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Nc9Z.png" alt="enter image description here"></a></p>
  
  <p>So far i have tried to adjust</p>
  
  <pre><code>.box {
       display: flex;
       flex: 1;         
       flex-direction: column;
  }
  </code></pre>
  
  <p>But none of the combinations did the trick.</p>
  
  <p>I'm quite confused because it is working with <code>.sidebar</code></p>
  
  <p>Here is my code:</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>html,
  body {
    padding: 0;
    margin: 0;
  }
  
  .headerPane {
    height: 66px;
    background-color: #ccc;
  }
  
  .footerPane {
    position: absolute;
    height: 49px;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ccc;
  }
  
  .body {
    position: absolute;
    top: 66px;
    right: 0;
    bottom: 49px;
    left: 0;
    display: flex;
  }
  
  .actionPane {
    height: 40px;
    background-color: #999;
  }
  
  .sidebar {
    width: 100px;
    overflow-y: scroll;
  }
  
  .main {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  .content {
    flex: 1;
    display: flex;
    overflow: auto;
    flex-direction: column;
  }
  
  .box {
    display: flex;
  }
  
  .column {
    padding: 10px;
  }
  
  .column &gt; div {}
  
  .column:nth-child(1) {
    overflow-y: scroll;
    width: 100px;
  }
  
  .column:nth-child(2) {
    width: 250px;
    overflow-y: scroll;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="headerPane"&gt;headerPane (no scoll)&lt;/div&gt;
  &lt;div class="body"&gt;
    &lt;div class="sidebar"&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;sidebar
      &lt;br /&gt;
    &lt;/div&gt;
    &lt;div class="main"&gt;
      &lt;div class="actionPane"&gt;actionPane with buttons (no scroll)&lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;div class="box"&gt;
          &lt;div class="column"&gt;
            &lt;div&gt;Sub 1&lt;/div&gt;
            &lt;div&gt;Sub 1&lt;/div&gt;
            &lt;div&gt;Sub 1&lt;/div&gt;
            &lt;div&gt;Sub 1&lt;/div&gt;
            &lt;div&gt;Sub 1&lt;/div&gt;
            &lt;div&gt;Sub 1&lt;/div&gt;
            &lt;div&gt;Sub 1&lt;/div&gt;
            &lt;div&gt;Sub 1&lt;/div&gt;
            &lt;div&gt;Sub 1&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="column"&gt;
            &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut mattis dui. Suspendisse consequat tincidunt ligula quis pretium. Praesent facilisis turpis urna, vitae mollis turpis condimentum quis. Fusce molestie nulla venenatis erat consectetur,
              feugiat congue leo mollis. Nam ac magna ut metus venenatis dapibus. Suspendisse ornare ullamcorper tellus, quis tempus nisi aliquet vel. Sed congue sollicitudin libero id posuere. Nunc maximus aliquam eros.&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="footerPane"&gt;Footer (no scroll)&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>i have also created a fiddle here: <a href="https://jsfiddle.net/p3e7ka20/8/" rel="nofollow noreferrer" title="Fiddle">https://jsfiddle.net/p3e7ka20/8/</a></p>
  
  <p>Thanks in advance.</p>