How to add a scroll to the buttons container? - css

Question

I have this buttons which have a hover effect that renders a span on top of the hovered button.
It works fine, but, when the width of the screen changes, it looks very bad:
These are the elements:
<div className='buttons'>
<button
className={editor.isActive('bold') ? 'is-active' : 'is-inactive'}
>
<strong>N</strong>
<span className='popup'>Negrita (Ctrl+B)</span>
</button>
<button
className={editor.isActive('italic') ? 'is-active' : 'is-inactive'}
>
<em>C</em>
<span className='popup'>Cursiva (Ctrl+I)</span>
</button>
<button
className={editor.isActive('strike') ? 'is-active' : 'is-inactive'}
>
<s>T</s>
<span className='popup'>Tachado (Ctrl+Shift+X)</span>
</button>
... (you get the idea)
</div>
This is the scss:
.buttons button {
position: relative;
height: 29.19px;
color: #000;
border: 1px solid black;
border-radius: 0.3rem;
margin: 0.2rem !important;
padding: 0.1rem 0.4rem !important;
background: white;
accent-color: black;
font-weight: 500;
}
button .popup {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 100%;
left: 50%;
margin-bottom: 5px;
margin-left: -60px;
}
button .popup::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
button:hover .popup {
visibility: visible;
}
What im looking for
I decided that the best solution would be a horizontal scroll. The problem is that the span is absolute positioned based on the button so i cant figure it out a way to keep the span on top of the hovered button while having an horizontal scroll.
Update 1
Ok, i tried to add a scroll, this is whats happening now:
As you can see, the scroll is working fine but the spans are 'covered', is there a way to fix this?
I added this to the code:
.buttons {
position: relative;
overflow-x: scroll;
white-space: nowrap;
}

Answer 1

Have a look at the definition of the absolute here
The element is removed from the normal document flow, and no space is
created for the element in the page layout. It is positioned relative
to its closest positioned ancestor, if any; otherwise, it is placed
relative to the initial containing block.
And positioned ancestor:
A positioned element is an element whose computed position value is
either relative, absolute, fixed, or sticky. (In other words, it's
anything except static.)
So, it should work even while having an horizontal scroll if you set position:relative for .buttons.