HTML: CSS: dynamic displayed DIV affects other DIVs

Question

I have a little template which can explain my question in general.

$('#someBtn').on('click', function(){
	$('.notification-panel').toggle();
});

.wrapper {
  height: 100%;
  width: 100%;
}

.notification-panel {
  background: green;
  width: 100%;
  display: none;
}

.content {
  background: yellow;
  width: 100%;
  height: 100px;
  overflow: auto;
}

.footer {
  background: blue;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='wrapper'>
  <div class='notification-panel'>
    Some notification
  </div>
  <div class='content'>
    Scaling to screen using vh and vw <br>
    Line 2 <br>
    Line 3 <br>
    Line 4 <br>
    Line 5 <br>
    Line 6 <br>
    Line 7 <br>
    Line 8 <br>
    Line 9 <br>
    Line 10 <br>
    Line 11 <br>
    Line 12 <br>
    Line 13 <br>
    Line 14 <br>
    Line 15 <br>
    Line 16 <br>
    Line 17 <br>
    Line 18 <br>
    Line 19 <br>
    Line 20 <br>
    Line 21 <br>
    Line 22 <br>
    Line 23 <br>
    Line 24 <br>
    <button id ="someBtn">
      Click me
    </button>
  </div>
  <div class='footer'>
    Footer
  </div>
</div>

As you can see, i have dynamic 'notification-panel' element which affects bottom elements (after toogling it shifts bottom elements down). My goal is shrinking of scrollable 'content' element's height without any shifts. I suppose flex (flex-shrink/flex-grow) should solve the problem, but i don't know how can i apply it to my template.

UPD1: 'position: fixed' for 'notification-panel' element doesn't solve the problem. It just overlaps the top part of my 'content' element, but my goal is shrinking of the 'content' element's height.

Answer 1

Flex would do this - just make your wrapper flex and remove the height from your content div and give it flex-grow (not shrink)

$('#someBtn').on('click', function() {
  $('.notification-panel').toggle();
});

html,
body {
  height: 100%;
  margin: 0;
}

.wrapper { /* this is optional - you can apply this directly to the body */
  display:flex;
  flex-direction:column;
  height: 100%;
}

.notification-panel {
  background: green;
  width: 100%;
  display: none;
}

.content {
  flex-grow:1;               /* this makes the content panel fill the remaining space */
  background: yellow;
  overflow: auto;
}

.footer {
  background: blue;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class='wrapper'>
  <div class='notification-panel'>
    Some notification
  </div>
  <div class='content'>
    Scaling to screen using vh and vw <br> Line 2 <br> Line 3 <br> Line 4 <br> Line 5 <br> Line 6 <br> Line 7 <br> Line 8 <br> Line 9 <br> Line 10 <br> Line 11 <br> Line 12 <br> Line 13 <br> Line 14 <br> Line 15 <br> Line 16 <br> Line 17 <br> Line 18
    <br> Line 19 <br> Line 20 <br> Line 21 <br> Line 22 <br> Line 23 <br> Line 24 <br>
    <button id="someBtn">
      Click me
    </button>
  </div>
  <div class='footer'>
    Footer
  </div>
</div>