Flyout not being displayed

Flyout not being displayed

I have two buttons placed side by side with the left button expanding to
fill the space
.left {
overflow: hidden;
display: block;
width: auto;
}
.right {
float: right;
width: 34px;
}
<div class="right" />
<div class="left" />
It took a long time to get even that working. Finally I figured out the
left side needed overflow: hidden to correctly fill the space.
Now, the left button requires a flyout form on hover. The problem is I
cannot get it to display while the container has the overflow: hidden
style associated. How can I resolve this?
Also, and this is the bain of my CSS experience, is there any reference I
can look at with regards to container and contained styles? For example I
wasted 3 hours yesterday trying to figure out how to auto expand a center
div between two float divs. Turns out the problem was the container had a
float: right style so the center div required a float: none.