title: CSS Auto Width is not Working with Flexbox
body: <p>Greetings Overflowers,</p>
  
  <p>I have an HTML page as follows:</p>
  
  <p><strong>1.</strong> HTML, BODY, DIVs and SPANs are reset to have <code>0px border</code>, <code>padding</code>, <code>margin</code> and <code>outline</code></p>
  
  <p><strong>2.</strong> HTML, BODY and DIV elements has <code>display: -webkit-flex</code> and <code>-webkit-flex: 0 0 auto</code></p>
  
  <p><strong>3.</strong> HTML and BODY with <code>height: 100vh</code> and <code>width: 100vw</code></p>
  
  <p><strong>4.</strong> Inside BODY, a DIV named <code>#slider</code> with <code>display: -webkit-flex</code> and -<code>webkit-flex: 0 0 auto</code></p>
  
  <p><strong>5.</strong> Inside this <code>#slider</code>, two DIVs <code>#sidebar</code> and <code>#main</code> with <code>display: -webkit-flex</code> and <code>-webkit-flex: 0 0 auto</code> for both, <code>width: 10rem</code> for <code>#sidebar</code> and <code>width: 100vw</code> for <code>#main</code></p>
  
  <p>Problem: I was expecting the width of <code>#slider</code> to be <code>10rem + 100vw</code>, but it is only <code>100vw</code> even if I change the width of <code>#main</code> to something smaller such as <code>50vw</code>!</p>
  
  <p>Am I missing anything in here?</p>
  
  <p>Kind regards</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>/*
   unicode-bidi: bidi-override;
   -webkit-user-modify: read-write-plaintext-only;
   -webkit-touch-callout: none;
   -webkit-text-size-adjust: none;
   -webkit-overflow-scrolling: touch;
   -webkit-transition: -webkit-transform 1s ease;
  */
  
  body, div, html, span {
   background: transparent;
   border: 0px;
   cursor: default;
   direction: rtl;
   margin: 0px;
   outline: none;
   padding: 0px;
   position: relative;
   -webkit-tap-highlight-color: transparent;
   -webkit-user-select: none;
  }
  
  body, html, div {
   background: black;
   display: -webkit-flex;
   overflow: hidden;
   -webkit-flex: none;
  }
  
  body, html {
   height: 100vh;
   width: 100vw;
  }
  
  span {
   background: white;
  }
  
  .stretch {
   -webkit-flex: 1;
  }
  
  .vertical {
   -webkit-flex-flow: column;
  }
  
  body&gt;.slider {
   /*-webkit-transform: translateX(10rem);*/
  }
  
  #main {
   width: 100vw;
  }
  
  body&gt;.slider&gt;#west {
   width: 10rem;
  }
  
  #filter-sort.region, #filter-sort-options.region {
   width: 10rem;
  }
  
  #doc&gt;#east {
   background: orange;
   height: 6rem;
   width: 6rem;
   -webkit-align-items: center;
   -webkit-justify-content: center;
  }
  
  #doc&gt;#center {
   background: green;
  }
  
  #header, #doc-types {
   height: 2.75rem;
  }
  
  #preview {
   max-height: 6rem;
   max-width: 6rem;
  }
  
  #search.button, #filter-sort.button {
   background: red;
   width: 3rem;
  }
  
  #doc-type {
   background: blue;
   width: 5rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link type="text/css" rel="stylesheet" href="style.css" /&gt;
   &lt;/head&gt;
   &lt;body ng:controller="Docs"&gt;
    &lt;div class="slider"&gt;
     &lt;div id="main" class="region vertical"&gt;
      &lt;div id="header" class="region"&gt;
       &lt;div id="search" class="button"&gt;&lt;/div&gt;
       &lt;div id="center" class="region stretch"&gt;
       &lt;/div&gt;
       &lt;div id="filter-sort" class="button"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="doc-types" class="region"&gt;
       &lt;div class="slider"&gt;
        &lt;div id="doc-type" class="button"&gt;&lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="docs" class="region"&gt;
       &lt;div class="slider stretch vertical"&gt;
        &lt;div id="doc" class="region"&gt;
         &lt;div id="east" class="region"&gt;
          &lt;div id="preview" class="region"&gt;&lt;/div&gt;
         &lt;/div&gt;
         &lt;div id="center" class="region stretch vertical"&gt;
          &lt;span id="title" class="label"&gt;&lt;/span&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="west" class="region"&gt;
      &lt;div class="slider"&gt;
       &lt;div id="filter-sort" class="region vertical"&gt;
        &lt;div id="header" class="region"&gt;
         &lt;span id="title" class="label"&gt;Filter and Sort&lt;/span&gt;
        &lt;/div&gt;
        &lt;div id="grades" class="region"&gt;
         &lt;div id="center" class="region stretch vertical"&gt;
          &lt;span id="grades" class="label"&gt;Grade&lt;/span&gt;&lt;br /&gt;
          &lt;span id="grades" class="field"&gt;&lt;/span&gt;
         &lt;/div&gt;
         &lt;div id="west" class="region"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="doc-topic" class="region"&gt;
         &lt;div id="center" class="region stretch vertical"&gt;
          &lt;span id="doc-topic" class="label"&gt;Doc Topic&lt;/span&gt;&lt;br /&gt;
          &lt;span id="doc-topic" class="field"&gt;&lt;/span&gt;
         &lt;/div&gt;
         &lt;div id="west" class="region"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="course" class="region"&gt;
         &lt;div id="center" class="region stretch vertical"&gt;
          &lt;span id="course" class="label"&gt;Course&lt;/span&gt;&lt;br /&gt;
          &lt;span id="course" class="field"&gt;&lt;/span&gt;
         &lt;/div&gt;
         &lt;div id="west" class="region"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="sort" class="region"&gt;
         &lt;div id="center" class="region stretch vertical"&gt;
          &lt;span id="sort" class="label"&gt;Sort&lt;/span&gt;&lt;br /&gt;
          &lt;span id="sort" class="field"&gt;&lt;/span&gt;
         &lt;/div&gt;
         &lt;div id="west" class="region"&gt;&lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
       &lt;div id="filter-sort-options" class="region vertical"&gt;
        &lt;div id="header" class="region"&gt;
         &lt;div id="back" class="button"&gt;&lt;/div&gt;
         &lt;div id="center" class="region stretch"&gt;
          &lt;span id="title" class="label"&gt;Options&lt;/span&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="grades" class="region"&gt;
         &lt;div class="slider vertical"&gt;
          &lt;span id="grade" class="label"&gt;&lt;/span&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="doc-topics" class="region"&gt;
         &lt;div class="slider vertical"&gt;
          &lt;span id="doc-topic" class="label"&gt;&lt;/span&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="courses" class="region"&gt;
         &lt;div class="slider vertical"&gt;
          &lt;span id="course" class="label"&gt;&lt;/span&gt;
         &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="sorts" class="region"&gt;
         &lt;div class="slider vertical"&gt;
          &lt;span id="sort" class="label"&gt;&lt;/span&gt;
         &lt;/div&gt;
        &lt;/div&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>