title: How to make flexbox dimensions force growth of container
body: <p>I have a flexbox containing elements which have a fixed-width <code>flex-basis</code>, and which don't allow growing or shrinking. The elements collectively are wider than the screen width. They display fine, because they're overflow into the <code>overflow: visible</code> space of their containers.</p>
  
  <p>But this interacts badly with a <code>display: sticky</code> element; I want a sticky element to hover over the flexbox as you scroll.</p>
  
  <p>What I'm seeing is that the sticky element hovers until you scroll one screen-width, and then disappears.</p>
  
  <p>This appears to be because the width of the container with <code>display: flex</code> doesn't grow to accommodate its children (and accordingly, neither does the body).</p>
  
  <p>How can I force a container to have its width set to the cumulative width of its flex children?</p>
  
  <p>If I run this javascript:</p>
  
  <pre><code>document.querySelector(".container").style.width = document.body.scrollWidth + 'px'
  </code></pre>
  
  <p>(Or equivalently this javascript):</p>
  
  <pre><code>document.body.style.width = document.body.scrollWidth + 'px'
  </code></pre>
  
  <p>everything works as I'd like, but ideally I'd like a pure-CSS solution, rather than needing to run javascript to push sizes up to containers.</p>
  
  <p>Example codepen: <a href="https://codepen.io/anon/pen/KjmQRz" rel="nofollow noreferrer">https://codepen.io/anon/pen/KjmQRz</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="stickybar"&gt;Sticky&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
          &lt;div class="column"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
    display: flex;
    height: 400px;
  }
  
  .stickybar {
    position: sticky;
    left: 0px;
    z-index: 10;
    margin-right: 5px;
    background-color: red;
  }
  
  .column {
    margin-right: 5px;
    flex: 0 0 150px;
    border: 1px solid black;
  }
  </code></pre>