JSFiddle - React, Tailwind, and code Playground

HTML

<div id="log"><h1>log</h1></div>
<div id="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>

CSS

.child {
display: none;
}

#parent {
  border: 1px solid #aaa;
  margin: 10px;
}

#log {
  border: 1px solid #bbb;
  margin: 10px;
}

#log h1 {
  color: #999;
}

JavaScript

const logTag = document.getElementById('log');
const log = (txt) => logTag.innerHTML += txt + '<br />'

const parent = document.getElementById('parent');

Array.from(parent.children).forEach(elem => {
   elem.style.display = 'block';
   log('Parent height now is ' + parent.offsetHeight)
});