I have an ASP.NET MVC partial view page that is split in several nested divs, one of those supposed to show a tree data structure made of folders and files. This is its 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>
As of now, I already had a vertical scrollbar for the two main divs struttura-fascicolo
and 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;
}
This was all working perfect until now, because specs have changed (surprise!) and I have to put a fixed navbar within those divs.
I thought that making this simple change would've served the purpose:
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;
}
Non of these worked, the scrollbar is now totally gone. I went "manual"
.albero-cartelle{
overflow-y: scroll;
}
but this only shows an empty scrollbar, without making the content actually scrollable.
What am I missing?