title: CSS Horizontal scroll container with an overlay that overflow's vertically
body: <p>I'm trying to make a horizontally scrolling container that holds a bunch of tabs. I want to make an overlay (think an options menu) that can appear over a tab. And what I would like is for the overlay to sit over the top of the horizontal scrollbar. Here is an image with what I mean:</p>
  
  <p><a href="https://i.stack.imgur.com/khujh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/khujh.png" alt="desired result - overlay sits over top of scrollbar"></a></p>
  
  <p>But here is what I actually get:
  <a href="https://i.stack.imgur.com/2Wthr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2Wthr.png" alt="what I actually get - overlay sits hidden"></a></p>
  
  <p>I've recreated my problem with a small example below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.page {
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
  }
  
  .header {
    height: 30px;
    background: #ccc;
    display: flex;
  }
  
  .items {
    display: flex;
    align-items: stretch;
    margin-right: 0.5rem;
    &amp;:last-child {
  margin-right: 0;
    }
    &gt; * {
  margin-right: 0.5rem;
  &amp;:last-child {
    margin-right: 0;
  }
    }
  }
  
  //Why I'm using 2 wrappers: https://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent/
  .scroll-super-wrapper {
    display: flex;
    flex-grow: 1;
    height: 100%;
    width: 100%;
    position: relative;
  }
  
  .scroll-wrapper {
    display: flex;
    flex-grow: 1;
    overflow-x: hidden;
  }
  
  .tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: start;
    position: absolute;
    top: 0;
    right: 0;
    bottom: -0.85rem; // Makes the scrollbar appear underneath
    left: 0;
    overflow-x: auto;
  }
  
  .tab {
    background: #444;
    color: #FFF;
    display: flex;
    align-items: center;
    white-space: nowrap;
    height: 100%;
    text-align: center;
    padding: 0 1rem;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    margin-right: 0.5rem;
    position: relative;
    &amp;:last-child {
  margin-right: 0;
    }
  }
  
  .overlay {
    position: absolute;
    top: 100%;
    left: 0;
    height: 100px;
    padding: 1rem;
    background-color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="page"&gt;
    &lt;div class="header"&gt;
  &lt;div class="items left-items"&gt;
    &lt;button&gt;Options&lt;/button&gt;
    &lt;button&gt;New&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="items scroll-super-wrapper"&gt;
    &lt;div class="scroll-wrapper"&gt;
      &lt;div class="tabs"&gt;
        &lt;div class="tab"&gt;Tab 1&lt;/div&gt;
        &lt;div class="tab"&gt;Tab 2&lt;/div&gt;
        &lt;div class="tab"&gt;
          Tab 3
          &lt;div class="overlay"&gt;
            Overlay content
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="tab"&gt;Tab 4&lt;/div&gt;
        &lt;div class="tab"&gt;Tab 5&lt;/div&gt;
        &lt;div class="tab"&gt;Tab 6&lt;/div&gt;
        &lt;div class="tab"&gt;Tab 7&lt;/div&gt;
        &lt;div class="tab"&gt;Tab 8&lt;/div&gt;
        &lt;div class="tab"&gt;Tab 9&lt;/div&gt;
        &lt;div class="tab"&gt;Tab 10&lt;/div&gt;
        &lt;div class="tab"&gt;Tab 11&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="items left-items"&gt;
    &lt;button&gt;Export&lt;/button&gt;
    &lt;button&gt;Share&lt;/button&gt;
  &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Stackoverflow's code snippets totally mess up the formatting. I've made a codepen here: <a href="https://codepen.io/anon/pen/rXLZgN" rel="nofollow noreferrer">https://codepen.io/anon/pen/rXLZgN</a></p>
  
  <p>Is it possible to do this without using JavaScript to calculate the x/y coordinates and make the element <code>position: fixed</code>? I would like to do this with just CSS if possible.</p>