JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<div id="output"></div>

<div id="sample" class="sampleClass">
  <h1>
   Header
  </h1>
    <div id="inner">
      <div>hello</div>
      <div>hello</div>  
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
      <div>hello</div>
   </div>
  <h1>
  footer
  </h1>
</div>

CSS

.sampleClass {
 padding: 10px;
 //height: 300px;
 overflow-y: auto;
 border: solid blue;
 //margin: 10px 300px 10px 25px;
 margin: 70px;
 position: 'relative'
}

#inner{
  position: 'relative';
  overflow-y: auto;
  border: solid red 1px;
}

JavaScript

window.addEventListener("resize", updateDimensions);

var node = document.getElementById('sample');
var style = node.currentStyle || window.getComputedStyle(node);
var marginTop = style.marginTop.replace("px", "");
marginTop = parseInt(marginTop, 10);
var innerNode = document.getElementById('inner');
var innerNodeStyle = innerNode.currentStyle || window.getComputedStyle(innerNode);
var innerMarginTop = innerNodeStyle.marginTop.replace("px", "");
innerMarginTop = parseInt(innerMarginTop, 10);
var innerMarginBottom = innerNodeStyle.marginBottom.replace("px", "");
innerMarginBottom = parseInt(innerMarginBottom, 10);
var totalInnerMarginSize = innerMarginTop + innerMarginBottom;
var safeBuffer = 0;
//if(marginTop < 20){
  safeBuffer = 20;
//}
var originalHeight = node.offsetHeight + marginTop + safeBuffer;


function updateDimensions(){
  var windowDimensions = {width: window.innerWidth, height: window.innerHeight};
  var dimensions = node.getBoundingClientRect();
  //console.log('totalInnerMarginSize: ' + totalInnerMarginSize);
  var cutoffPoint = marginTop + node.offsetHeight + safeBuffer + totalInnerMarginSize ;
  var nodeTop = dimensions.top;
  var innerNodeDimensions = innerNode.getBoundingClientRect();
  var innerNodeTop = innerNodeDimensions.top;
  var innerNodeHeight = innerNodeDimensions.height;
  //console.log('innerNodeHeight: ' + innerNodeHeight);
  var windowHeight = windowDimensions.height;
  console.log('windowHeight: ' + windowHeight + ' cutoffPoint: ' + cutoffPoint);
  var windowIsCutOff = windowHeight <= cutoffPoint;
  //console.log('windowHeight: ' + windowHeight + ' nodeTop: ' + nodeTop);
  var windowIsShowing = windowHeight > nodeTop;


  var nodeCanGrowBigger =  windowHeight > cutoffPoint && cutoffPoint < originalHeight;
  //console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger);
  //console.log('windowHeight: ' + windowHeight + ' cutoffPoint: ' + cutoffPoint
              //+ ' originalHeight: ' +...