Scrollable items outside of scroll container; Invisible scroll container - css

Question

I have container with buttons on top of a map control. This control needs to be scrollable as there might be more buttons than the screen height allows for.
What I am looking for is a way to have the buttons to be displayed outside of the container which means that I can put the container off the screen to be invisible.
Or to have the scrollbar on the left hand side so that it is not between the map and the controls.
Here is some html
<div class='ctrl__scroll'>
<button class="map__interface mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
</button>
<button class="map__interface mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">remove</i>
</button>
<button>...</button>
</div>
Here is the css
.ctrl__scroll {
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
background-color: rgba(0, 0, 0, 0.5);
}
.ctrl__scroll > .mdl-button {
margin-top: 10px;
margin-left: 10px;
}
Here is the jsFiddle for the screenshot.
https://jsfiddle.net/goldrydigital/zez3gz21/
Edit: I have now worked this out and changed the jsFiddle. I am using the excellent jScrollPane plugin which allows me to do whatever I want with scrollpanes.

Answer 1

Even if you could display the children outside their scrollable parent (which is counter-intuitive at best) I don't think you'd be able to scroll them. However, you can't have overflow-x:visible; overflow-y:auto; on the same an element. It will automatically add a scrollbar for the X asis too.
Let's take into account that most mobile devices have nice-looking, self-hiding semi-transparent bars, making your solution look good even with the scrollbar visible (as it is now). We only need to fix the scrollbar on non-touch devices. On desktop devices, which are rendering it ugly and opaque. Here's a possible solution:
#media (min-width: 768px) {
.ctrl__scroll > .mdl-button {
margin: 10px 0 0 10px;
}
.ctrl__scroll {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
overflow: visible;
background-color: transparent;
}
}
Add it at the end of your current CSS. Your updated jsFiddle.

Answer 2

Just add:
.map {
padding-left: 90px;
...
}
which is the size of your side menu