offsetHeight is equal to parent's offsetHeight even though overflow occurs

Question

I'm trying to set the font size to fit the size of the div container. I've seen offsetWidth used in a similar context, so for my application I used offsetHeight because the overflow occurs vertically.

However, offsetHeight of the parent div seems to equal the offsetHeight of the div containing the text. I can use element.parentElement.parentElement.offsetHeight, but this - in turn - doesn't take into account that the grandparent also contains the footer, and the overflow is not calculated properly.

Am I using the wrong property or the wrong way to get the height?

for (const element of document.getElementsByClassName("shrink")) {
  var size = 32;
  console.log(element.offsetHeight, element.parentElement.offsetHeight, element.parentElement.parentElement.offsetHeight)
  while (element.offsetHeight > element.parentElement.offsetHeight) {
    element.style.fontSize = size + "pt"
    size -= 1
  }
}

.party_card {
  padding: 1em 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  border: 1px black solid;
}

.party_cardtext {
  display: block;
  text-align: left;
  font-size: 32pt;
  word-break: break-word;
  flex-grow: 1;
}

#container {
  display: flex;
  height: 200px;
}

.footer {
  min-width: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0.5em;
}

<div id="container">
  <div class="party_card">
    <div class="party_cardtext">
      <div class="shrink">Short text</div>
    </div>
    <div class="footer">
      <span>foo</span>
      <span>bar</span>
    </div>
  </div>
  <div class="party_card">
    <div class="party_cardtext">
      <div class="shrink">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="footer">
      <span>foo</span>
      <span>bar</span>
    </div>
  </div>
</div>

Answer 1

for (const element of document.getElementsByClassName("shrink")) {
  var size = 32;
  console.log(element.offsetHeight, element.parentElement.offsetHeight, element.parentElement.parentElement.offsetHeight)
  while (element.offsetHeight > element.parentElement.offsetHeight) {
    element.style.fontSize = size + "pt"
    size -= 1
  }
}

.party_card {
  padding: 1em 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  border: 1px black solid;
}

.party_cardtext {
  display: block;
  text-align: left;
  font-size: 32pt;
  word-break: break-word;
  flex-grow: 1;
  height:100%;
}

#container {
  display: flex;
  height: 200px;
}

.footer {
  min-width: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 0.5em;
}

<div id="container">
  <div class="party_card">
    <div class="party_cardtext">
      <div class="shrink">Short text</div>
    </div>
    <div class="footer">
      <span>foo</span>
      <span>bar</span>
    </div>
  </div>
  <div class="party_card">
    <div class="party_cardtext">
      <div class="shrink">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
    <div class="footer">
      <span>foo</span>
      <span>bar</span>
    </div>
  </div>
</div>

All I changed was to add height:100% to .party_cardtext

Without it, the element is allowed any height, and it overflows. offsetHeight is the total height of the element, not just the part that fits in parent. Setting to 100% it makes sure the div sticks inside its parent, since the parent has a height set too.