Flexbox: Why isn't whole div shown when element below becomes hidden? - css

Question

I need a flexible column where a couple of widgets are placed below each other and they are supposed to take up space dynamically. A widget has a title, and a scrollable content.
The last widget is supposed to be collapsible (by clicking on the widget title).
The problem is: When I collapse the widget, part of the title becomes hidden.
See here (click "Batch runs" to see the problem):
http://jsfiddle.net/stoefln/Ls0aqnvf/8/
$('.batchRunsTitle').on('click', function() {
$('.batchRuns').toggle()
})
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" style="height: calc(100% - 80px); background: #AAA; display: flex; flex-direction: column; ">
<div class="batchView" style="flex-grow: 1; display: flex; flex-direction: column; border: 1px solid #F00; overflow: hidden;">
<div class="header" style="">widget title 1</div>
<div class="tests" style="flex-basis: 70%; border: 1px solid #F0F; overflow: auto;">test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/></div>
<div>
widget title 2
</div>
<div class="ehs" style="flex-basis: 30%; border: 1px solid #00F; overflow: auto;">test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/></div>
</div>
<div class="batchRunsContainer" style="flex-grow: 1; display: flex; flex-direction: column; overflow: auto">
<div class="batchRunsTitle" style="cursor: pointer; background-color: #6c2; border: 10px solid #55F; ">
widget title 3
</div>
<!-- why is the "Batch runs" title only half visible when the next block gets hidden??? -->
<div class="batchRuns" style="overflow: auto; display: block;">
test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>
</div>
</div>
</div>
<div class="log" style="height: 80px; background-color: #EEAEEE66; position: absolute; bottom: 0; right: 0; left: 0;">
Log
</div>
Also for reference here the 2 states as screenshots:
Open:
Collapsed:

Answer 1

Looks like it is being cut due to the overflow: auto on the batchRunsContainer. One way to fix this is to put the batchRunsTitle div outside the batchRunsContainer. Here is a working demo (check in full page):
const title = document.querySelector('.batchRunsTitle')
const content = document.querySelector('.batchRuns')
title.addEventListener('click', () => {
if (content.style.display !== 'none') {
content.style.display = 'none'
} else {
content.style.display = ''
}
})
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
<div class="column" style="height: calc(100% - 80px); background: #AAA; display: flex; flex-direction: column; ">
<div class="batchView" style="flex-grow: 1; display: flex; flex-direction: column; border: 1px solid #F00; overflow: hidden;">
<div class="header" style="">widget title 1</div>
<div class="tests" style="flex-basis: 70%; border: 1px solid #F0F; overflow: auto;">test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/></div>
<div>
widget title 2
</div>
<div class="ehs" style="flex-basis: 30%; border: 1px solid #00F; overflow: auto;">test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/>test2<br/></div>
</div>
<div class="batchRunsTitle" style="cursor: pointer; background-color: #6c2; border: 10px solid #55F; ">
widget title 3
</div>
<div class="batchRunsContainer" style="flex-grow: 1; display: flex; flex-direction: column; overflow: auto">
<div class="batchRuns" style="overflow: auto; display: block;">
test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>test3<br/>
</div>
</div>
</div>
<div class="log" style="height: 80px; background-color: #EEAEEE66; position: absolute; bottom: 0; right: 0; left: 0;">
Log
</div>