CSS: Overflowing element is not displayed despite overflow: visible - html

Question

I'd like to add a dropdown menu to a fixed toolbar, but the .toolbar-dropdown-menu element is not displayed as shown in the screenshot below (tested with Google Chrome 80.0):
My first impression was that the behavior of .toolbar-dropdown-menu is as if its parent was set to overflow: hidden: If I make the parent .toolbar-btn wider, the .toolbar-dropdown-menu is shown within the boundaries of its parent:
However, even if I explicitly set all elements to overflow: visible, the .toolbar-dropdown-menu remains invisible, even if its display is set to block and its visibility to visible.
Question: Why is the .toolbar-dropdown-menu element invisible and how do I get it to show up?
Here's a code snippet:
(This is a reduced version of the toolbar. It can usually be assigned to varying positions and expanded to show labels, but I excluded those features to minimize the code you have to go through)
.floating-toolbar {
position: fixed;
z-index: 1031;
background: #333;
color: rgba(255, 255, 255, 0.5);
}
.floating-toolbar.left {
left: 0;
}
.floating-toolbar.left .toolbar-btn .toolbar-icon {
right: 0.5rem;
}
.floating-toolbar.left .toolbar-dropdown > .toolbar-dropdown-menu {
position: absolute;
left: 21rem;
top: 0;
}
.floating-toolbar.left.minimized {
left: -18.5rem;
}
.floating-toolbar .toolbar-btn {
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, .5);
padding: 0.5rem;
font-size: 1rem;
width: 20rem;
cursor: pointer;
}
.floating-toolbar .toolbar-btn:last-child {
border-bottom: none;
}
.floating-toolbar .toolbar-btn.active {
color: #fff;
}
.floating-toolbar .toolbar-btn .toolbar-icon {
position: absolute;
text-align: center;
width: 1.5rem;
top: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<div id="studio-toolbar" class="floating-toolbar top left minimized">
<div class="toolbar-btn maximize-button">
<div class="toolbar-label"> </div>
<div class="toolbar-icon"><i class="fas fa-bars"></i></div>
</div>
<div class="toolbar-btn active">
<div class="toolbar-label">Edit Text</div>
<div class="toolbar-icon"><i class="fas fa-font"></i></div>
</div>
<div class="toolbar-btn">
<div class="toolbar-label">Element Properties</div>
<div class="toolbar-icon"><i class="fas fa-edit"></i></div>
</div>
<div class="toolbar-btn toolbar-dropdown">
<div class="toolbar-label">Layout Structure</div>
<div class="toolbar-icon"><i class="fas fa-grip-horizontal"></i></div>
<div class="toolbar-dropdown-menu">
<div class="toolbar-btn">
<div class="toolbar-label">Column Offset</div>
<div class="toolbar-icon"><i class="fas fa-long-arrow-alt-right"></i></div>
</div>
<div class="toolbar-btn">
<div class="toolbar-label">Column Width</div>
<div class="toolbar-icon"><i class="fas fa-arrows-alt-h"></i></div>
</div>
<div class="toolbar-btn">
<div class="toolbar-label">Add Row</div>
<div class="toolbar-icon"><i class="fas fa-plus-square"></i></div>
</div>
</div>
</div>
</div>

Answer 1

In your code example I see dropdown. Just background-color is white so it is not visible.
.floating-toolbar {
position: fixed;
z-index: 1031;
background: #333;
color: rgba(255, 255, 255, 0.5);
}
.floating-toolbar.left {
left: 0;
}
.floating-toolbar.left .toolbar-btn .toolbar-icon {
right: 0.5rem;
}
.floating-toolbar.left .toolbar-dropdown > .toolbar-dropdown-menu {
position: absolute;
left: 21rem;
top: 0;
background-color: #333;
}
.floating-toolbar.left.minimized {
left: -18.5rem;
}
.floating-toolbar .toolbar-btn {
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, .5);
padding: 0.5rem;
font-size: 1rem;
width: 20rem;
cursor: pointer;
}
.floating-toolbar .toolbar-btn:last-child {
border-bottom: none;
}
.floating-toolbar .toolbar-btn.active {
color: #fff;
}
.floating-toolbar .toolbar-btn .toolbar-icon {
position: absolute;
text-align: center;
width: 1.5rem;
top: 0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<div id="studio-toolbar" class="floating-toolbar top left minimized">
<div class="toolbar-btn maximize-button">
<div class="toolbar-label"> </div>
<div class="toolbar-icon"><i class="fas fa-bars"></i></div>
</div>
<div class="toolbar-btn active">
<div class="toolbar-label">Edit Text</div>
<div class="toolbar-icon"><i class="fas fa-font"></i></div>
</div>
<div class="toolbar-btn">
<div class="toolbar-label">Element Properties</div>
<div class="toolbar-icon"><i class="fas fa-edit"></i></div>
</div>
<div class="toolbar-btn toolbar-dropdown">
<div class="toolbar-label">Layout Structure</div>
<div class="toolbar-icon"><i class="fas fa-grip-horizontal"></i></div>
<div class="toolbar-dropdown-menu">
<div class="toolbar-btn">
<div class="toolbar-label">Column Offset</div>
<div class="toolbar-icon"><i class="fas fa-long-arrow-alt-right"></i></div>
</div>
<div class="toolbar-btn">
<div class="toolbar-label">Column Width</div>
<div class="toolbar-icon"><i class="fas fa-arrows-alt-h"></i></div>
</div>
<div class="toolbar-btn">
<div class="toolbar-label">Add Row</div>
<div class="toolbar-icon"><i class="fas fa-plus-square"></i></div>
</div>
</div>
</div>
</div>