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

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);