How to animate the height of an element which has children of variable heights

Question

I want to animate a <div> in HTML on hover. The element would children of variable heights, so I cannot put the parent's height in px or any fixed unit. I have tried putting values like 100%, initial, auto, etc. but they did not work.

.animator {
  max-height: 100px;
  overflow: hidden;
  border: dashed 3px purple;
  transition: max-height 200ms linear;
}

.animator:hover {
  max-height: 200px; /* this needs to be dynamic */
}

.animator .hover-internal {
  height: 400px; /* this can vary depending on the amount of content */
}

<div class="animator">
  <div class="hover-internal">
    hover over me
  </div>
</div>

<div class="other">Some other content</div>

A related questions solves it by using a fixed pixel max-height, but that would not work in this case, since the height would be dynamic.

---

Related: How can I transition height: 0; to height: auto; using CSS?