Making a DIV element deep in structure scrollable - html

Question

I've been trying to figure this one out, but haven't been successful yet. I understand the 'overflow' attribute, but I can't quite get it to work in my case. Below is a simplified version of my widget structure:
The black DIV element is a specifically-sized placeholder for my widget that the host application provides. It has height and width set to a specific value.
The red DIV is my widget container which I specify the height and width to be 100%, taking up the entire parent container.
The green DIVs are general visual sections of my widget ( which in fact could be a few DIVs deep ). The first three heights are determined by static labels or buttons. I don't specifically set a height or width on them.
The blue DIV at the bottom within the last green DIV is intended to contain dynamic content which is populated at runtime.
What I'd like is that the blue DIV becomes scrollable when it overflows its parent container. Simply adding "overflow: auto" to the blue DIV doesn't work.
Here's a simulated HTML structure:
<div id="placeholder" style="margin: 8px; height: 300px; width: 300px; background-color: gainsboro;">
<div id="widget-container" style="height: 100%; width: 100%;">
<div id="widget">
<div id="section-1-container">
<div id="section-1">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-2-container">
<div id="section-2">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-3-container">
<div id="section-3">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-4-container">
<div id="section-4" style="display: block; padding: 4px;">
Some dynamic stuff (rows of records...)
<div id="record-container" style="display: block; margin-left: 12px; padding: 4px;">
<div class="record" style="padding: 4px">
Record 1
</div>
<div class="record" style="padding: 4px">
Record 2
</div>
<div class="record" style="padding: 4px">
Record 3
</div>
<div class="record" style="padding: 4px">
Record 4
</div>
<div class="record" style="padding: 4px">
Record 5
</div>
<div class="record" style="padding: 4px">
Record 6
</div>
<div class="record" style="padding: 4px">
Record 7
</div>
<div class="record" style="padding: 4px">
Record 8
</div>
<div class="record" style="padding: 4px">
Record 9
</div>
<div class="record" style="padding: 4px">
Record 10
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I've tried adding "overflow: auto" to "section-4-container", "section-4", and "record-container", but the records still overflow the container space. How could I modify this such that the last section (ideally the "record-container") adds the vertical scrollbar when needed?
Thanks in advance!

Answer 1

You have to set the section-4-container height, the browser does not know its size, so it will just increase the size as more content is added.
I removed the id="widget", and applied flexbox styles.
the id="widget-container" is the flexbox container, so it requires two css roles:
display: flex; flex-direction: column;
then we tell to section-4-container to fill the remaining space:
flex: 1 1 auto; overflow: auto;
<div id="placeholder" style="margin: 8px; height: 300px; width: 300px; background-color: gainsboro;">
<div id="widget-container" style="height: 100%; width: 100%; display: flex; flex-direction: column;">
<div id="section-1-container">
<div id="section-1">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-2-container">
<div id="section-2">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-3-container">
<div id="section-3">
<div style="display: block; padding: 4px">
Some static stuff (buttons, labels...)
</div>
</div>
</div>
<div id="section-4-container" style="flex: 1 1 auto; overflow: auto;">
<div id="section-4" style="display: block; padding: 4px;">
Some dynamic stuff (rows of records...)
<div id="record-container" style="display: block; margin-left: 12px; padding: 4px;">
<div class="record" style="padding: 4px">
Record 1
</div>
<div class="record" style="padding: 4px">
Record 2
</div>
<div class="record" style="padding: 4px">
Record 3
</div>
<div class="record" style="padding: 4px">
Record 4
</div>
<div class="record" style="padding: 4px">
Record 5
</div>
<div class="record" style="padding: 4px">
Record 6
</div>
<div class="record" style="padding: 4px">
Record 7
</div>
<div class="record" style="padding: 4px">
Record 8
</div>
<div class="record" style="padding: 4px">
Record 9
</div>
<div class="record" style="padding: 4px">
Record 10
</div>
</div>
</div>
</div>
</div>
</div>