div с прокручиваемым контентом и фиксированной панелью навигации

Question

У меня есть страница частичного представления ASP.NET MVC, которая разделена на несколько вложенных элементов div, одна из которых должна показывать древовидную структуру данных, состоящую из папок и файлов. Это его HTML:

<div class="area-fascicolo">
    <div class="intestatario-fascicolo">
        <!-- current data title -->
    </div>
    <div class="consultazione-fascicolo">
        <div class="struttura-fascicolo">
            <!-- recursive folder structure -->
        </div>
        <div class="dettagli-fascicolo">
            <!-- details of selected file -->
        </div>
    </div>
</div>

На данный момент у меня уже есть вертикальная полоса прокрутки для двух основных элементов struttura-fascicolo и dettagli-fascicolo:

.area-fascicolo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.consultazione-fascicolo {
    display: flex;
    justify-content: space-between;
    text-align: left;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.struttura-fascicolo {
    width: 40%;
    border: solid 1px #e3e3e3;
    border-radius: 4px;
    overflow: hidden;
}

До этого момента все работало идеально, потому что спецификации изменились (удивительно!), И я должен установить фиксированную панель навигации внутри этих элементов.

Я думал, что внесение этого простого изменения послужило бы цели:

Html:

<div class="area-fascicolo">
    <div class="intestatario-fascicolo">
        <!-- current data title -->
    </div>
    <div class="consultazione-fascicolo">
        <div class="struttura-fascicolo">
            <div class="bar">
                <!-- bar elements -->
            </div>
            <div class="albero-cartelle">
                <!-- recursive folder structure -->
            </div>
        </div>
        <div class="dettagli-fascicolo">
            <div class="bar">
                <!-- bar elements -->
            </div>
            <div id="AreaDettagli">
                <!-- details of selected file -->
            </div>
        </div>
    </div>
</div>

CSS:

.struttura-fascicolo {
    overflow: hidden;
}

.albero-cartelle{
    overflow-y: auto;
}

Ничего из этого не сработало, полоса прокрутки теперь полностью исчезла. Я пошел "ручной"

.albero-cartelle{
    overflow-y: scroll;
}

но это показывает только пустую полосу прокрутки, без возможности прокручивать контент.

Чего мне не хватает?