title: left-side sticky element disappears when scrolling to the right
body: <p>I am trying to create a web page with five regions, three of them are sticky. The sticky feature works fine when the user scrolls down, but the elements which should stick to the left just disappear when the window is scrolled to the right past the width of one viewport. I don't know how wide the data will be in advance, which is why I am trying to allow the elements to automatically expand to fit the contents. Is there a way to fix this so the left elements stay visible as the user scrolls all the way to the right?</p>
  
  <p>The regions are described as follows:</p>
  
  <ol>
  <li><p><code>header</code> - This region should disappear when the user scrolls vertically.</p></li>
  <li><p><code>upperleft</code> - This region is a small column header which sticks to the left and top while scrolling.</p></li>
  <li><p><code>upperright</code> - This region should stick only to the top when scrolling vertically. It should disappear behind <code>upperleft</code> when the user scrolls to the right.</p></li>
  <li><p><code>bottomleft</code> - This region should stick to the left of the screen when the user scrolls right and disappear behind <code>upperleft</code> when the user scrolls down.</p></li>
  <li><p><code>bottomright</code> - This region should disappear behind <code>upperleft</code>, <code>upperright</code>, and <code>bottomleft</code> depending on how the user scrolls.</p></li>
  </ol>
  
  <p>Here is an example which demonstrates the problem (I am using Firefox 62.0.3):</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>body {
    margin: 1rem;
    display: grid;
    grid-template-columns: 3rem auto;
    grid-template-rows: 12vh 2rem auto;
    grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";}
  
  .header {
    position: fixed;
    grid-area: header;
    display: block;
    background: white;
    text-align: center;
    width: 100vw;
  }
  
  .topleft {
    grid-area: topleft;
    background-color: #bababa;
    border: solid 1px black;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
  }
  
  .topright {
    grid-area: topright;
    background-color: #c0c0c0;
    border: solid 1px black;
    box-sizing: border-box;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    white-space: nowrap;
    display: inline-block;
    width: 300vw; /* simulate large horizontal data set */
  }
  
  .bottomleft {
    grid-area: bottomleft;
    background-color: #c0c0c0;
    border: solid 1px black;
    box-sizing: border-box;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
    height: 300vh; /* simulate large vertical data set */
  }
  
  .bottomright {
    grid-area: bottomright;
    background-color: #cacaca;
    border: solid 1px brown;
    box-sizing: border-box;
    text-align: left;
    display: inline-block;
    height: 300vh; /* simulate large vertical data set */
    width: 300vw; /* simulate large horizontal data set */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
  This intro area should be visible until scrolled out of view.
  &lt;/div&gt;
  &lt;div class="topleft"&gt;
  Stay
  &lt;/div&gt;
  &lt;div class="topright"&gt;
  Top line sticky vertically but not horizontally
  &lt;/div&gt;
  &lt;div class="bottomleft"&gt;
  &lt;p&gt;1&lt;/p&gt;
  &lt;p&gt;2&lt;/p&gt;
  &lt;p&gt;3&lt;/p&gt;
  &lt;p&gt;4&lt;/p&gt;
  &lt;p&gt;5&lt;/p&gt;
  &lt;p&gt;6&lt;/p&gt;
  &lt;p&gt;7&lt;/p&gt;
  &lt;p&gt;8&lt;/p&gt;
  &lt;p&gt;9&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="bottomright"&gt;
  Large area with cells
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>