CSS Horizontal scroll container with an overlay that overflow's vertically

Question

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:

But here is what I actually get:

I've recreated my problem with a small example below:

.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;
  &:last-child {
margin-right: 0;
  }
  > * {
margin-right: 0.5rem;
&: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;
  &:last-child {
margin-right: 0;
  }
}

.overlay {
  position: absolute;
  top: 100%;
  left: 0;
  height: 100px;
  padding: 1rem;
  background-color: black;
}

<div class="page">
  <div class="header">
<div class="items left-items">
  <button>Options</button>
  <button>New</button>
</div>
<div class="items scroll-super-wrapper">
  <div class="scroll-wrapper">
    <div class="tabs">
      <div class="tab">Tab 1</div>
      <div class="tab">Tab 2</div>
      <div class="tab">
        Tab 3
        <div class="overlay">
          Overlay content
        </div>
      </div>
      <div class="tab">Tab 4</div>
      <div class="tab">Tab 5</div>
      <div class="tab">Tab 6</div>
      <div class="tab">Tab 7</div>
      <div class="tab">Tab 8</div>
      <div class="tab">Tab 9</div>
      <div class="tab">Tab 10</div>
      <div class="tab">Tab 11</div>
    </div>
  </div>
</div>
<div class="items left-items">
  <button>Export</button>
  <button>Share</button>
</div>
  </div>
</div>

Stackoverflow's code snippets totally mess up the formatting. I've made a codepen here: https://codepen.io/anon/pen/rXLZgN

Is it possible to do this without using JavaScript to calculate the x/y coordinates and make the element position: fixed? I would like to do this with just CSS if possible.

Answer 1

You defined your tabs class as absolute to the relative scroll-super-wrapper That means that the wrapper will always contain it. so or you will built it again from in a different way. or you can take your overlay class and set it position:fixed and it will take it out the relative of the wrapper (not recommended at all);