title: position: sticky not working within flexbox child
body: <p>I have a flexbox with 5 direct children. The second and third column (.colonnade__trigger) have children (span.label) which should be sticky.
  But it is not :(</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="colonnade"&gt;
      &lt;aside class="sidebar colonnade__column alpha"&gt;
          &lt;div class=""&gt;
              NAVI
          &lt;/div&gt;
      &lt;/aside&gt;
      &lt;label class="colonnade__trigger alpha" for="colonnade-alpha"&gt;
          &lt;span class="label"&gt;
              Show Navigation
          &lt;/span&gt;
      &lt;/label&gt;
      &lt;main class="main" id="main"&gt;
      &lt;/main&gt;
      &lt;aside class="sidebar colonnade__column omega"&gt;
          &lt;div class=""&gt;
              CART
          &lt;/div&gt;
      &lt;/aside&gt;
      &lt;label class="colonnade__trigger omega" for="colonnade-omega"&gt;
          &lt;span class="label"&gt;
              Show Cart
          &lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.colonnade {
      display: flex;
  }
  .colonnade__trigger {
      display: block;
      width: 2em;
      padding: .5em;
      background-color: #eee;
  }
  .colonnade__trigger .label {
      position: sticky;
      display: block;
      transform: rotate(90deg);
      transform-origin: 0 100%
  }
  </code></pre>
  
  <p>See my Codepen for the scenario <a href="https://codepen.io/bitstarr/pen/QBwMEq" rel="nofollow noreferrer">https://codepen.io/bitstarr/pen/QBwMEq</a></p>