Fixed el. inside scrollable div

HTML

<div id="container">
  <div class="content info">
    Click in this div to hide/show the tooltip.
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  
  <div id="tooltip">
    This tooltip should not occupy it's initial space at the bottom of it's parent div... 
    <br><br><br>
    But yet it's space is taken in consideration. Scroll down to see...
  </div>
</div>

CSS

#container {
  height: 19rem;
  overflow-y: scroll;
}
.info {
  background: lightblue;
  padding: .5rem;
}

#tooltip {
  background: gray;
  position: sticky;
  bottom: 0;
  margin: 0 2rem;
  display: none;
  padding: 1rem;

  
}
#tooltip.shown {
  opacity: 1;
  display: block;
}

JavaScript

const myDiv = document.querySelector('#container');
const tooltip = document.querySelector('#tooltip');
let showTooltip = false;
myDiv.addEventListener('click', () => {
	showTooltip = !showTooltip;
  if (showTooltip) {
  	tooltip.classList.add('shown');
  } else {
  	tooltip.classList.remove('shown');
  }
})