title: CSS3 FLEXBOX not correct working Chrome (FF - OK)
body: <p>Some structure working good in FF, but Chrome is NOT.</p>
  
  <p>Stack snippet</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 {
      height: 100%!important; width: 100%!important;
      margin: 0!important; padding: 0!important;
  }
  
  .x {display: flex; flex-direction: column; height: 100%; width: 100%;}
      .x-header {background-color: silver;}
      .x-body {flex: 1 1 auto; overflow-y: auto;}
  
  /* CONTENT WITH 2 COLUMNS */
  .x-structure-2-columns {display: flex; flex-direction: row; height: 100%; width: 100%;}
      .x-structure-2-columns-left {background-color: lightgreen; width: 100px;}
      .x-structure-2-columns-right {display: flex; flex: 1 1 auto; overflow-y: auto; flex-direction: column;}
          .x-structure-2-columns-right-header {background: yellow;}
          .x-structure-2-columns-right-body {flex: 1 1 auto; overflow-y: auto; min-height: 0px; background: pink;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="x"&gt;
      &lt;div class="x-header"&gt;This is a header&lt;/div&gt;
      &lt;div class="x-body"&gt;
          &lt;div class="x-structure-2-columns"&gt;
              &lt;div class="x-structure-2-columns-left"&gt;
                  LEFT
              &lt;/div&gt;
              &lt;div class="x-structure-2-columns-right"&gt;
                  &lt;div class="x-structure-2-columns-right-header"&gt;SUB NAVIGATION&lt;/div&gt;
                  &lt;div class="x-structure-2-columns-right-body"&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;p&gt;123&lt;br&gt;345&lt;br&gt;678&lt;/p&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>2 columns must be fixed, but they are not in Chrome.</p>
  
  <p>Here is also a fiddle: <a href="https://jsfiddle.net/q28v4z05/" rel="nofollow noreferrer">https://jsfiddle.net/q28v4z05/</a></p>
  
  <p>Thanks!</p>