CSS: переполняющий элемент не отображается, несмотря на переполнение: видимый

Question

Я бы хотел добавить выпадающее меню на фиксированную панель инструментов, но элемент .toolbar-dropdown-menu не отображается, как показано на скриншоте ниже (протестировано с Google Chrome 80.0):

Мое первое впечатление было таким, что поведение .toolbar-dropdown-menu такое, как если бы его родитель был установлен на overflow: hidden: если я сделаю родителя .toolbar-btn шире, .toolbar-dropdown-menu отображается в границах его родителя:

Однако, даже если я явно установлю все элементы на overflow: visible, .toolbar-dropdown-menu останется невидимым , даже если его отображение установлено на block и его видимость на visible.

Вопрос: Почему элемент .toolbar-dropdown-menu невидим и как я могу его отобразить?

Вот фрагмент кода:

(Это уменьшенная версия панели инструментов. Обычно ее можно назначать разным позициям и расширять для отображения меток, но я исключил эти функции, чтобы свести к минимуму код, который вам нужен, от go до

.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">&nbsp;</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

В вашем примере кода я вижу выпадающий список. Просто background-color - это white, поэтому его не видно.

.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">&nbsp;</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>