CODEWITHSUNDEEP
cssflexbox
stoefln
stoefln

Reputation: 14556

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

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:

open

Collapsed:

collapsed

Upvotes: 0

Views: 69

Answers (1)

aerial
aerial

Reputation: 1198

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>

Upvotes: 1

Related Questions