JSFiddle - React, Tailwind, and code Playground

by Philip Warkentien II

HTML

<h2>straightforward</h2>
<div class="has-height">
  <div class="has-auto-height">
    look at the Console. (F12)
  </div>
</div>
<h2>a little harder</h2>
<div class="has-height">
  <div class="does-nothing">
    <div class="has-auto-height">
      look at the second line in the Console. (F12)
    </div>
  </div>
</div>

CSS

.has-height {
  height: 200px;
}
.has-auto-height {
  height: auto;
}
.does-nothing {
  height: auto;
}

JavaScript

var testSubject = document.getElementsByClassName('has-auto-height')[0];
var height = testSubject.parentNode.offsetHeight;
console.log("straightforward: ", height);
var testSubject2 = document.getElementsByClassName('has-auto-height')[1];
var height = testSubject.parentNode.offsetHeight;
console.log("a little harder: ", height);