Transitions on max-height not working (sometimes)

Question

I am trying to create a transition on max-height. I have two instances on two separate pages which have identical CSS, and for some reason one works and the other doesn't.

I have written a comparable CSS example. The toggle button simply adds or removes a class which sets the max-height. This example isn't working either, but it is delayed by the transition duration (but only on removing the toggled class). So I wonder why it isn't showing the animation. Thank you!

$( document ).ready(function() {

  $('button').click(function() {
        $('div').toggleClass('collapsed');
  });
});

html {
  height: 100%;
}

div {
   border: solid 2px pink;
   max-height: 100%;
   transition: max-height 0.3s ease;
   overflow: hidden;
   height: 100px;
}

div.collapsed {
  max-height:0;
  transition: max-height 0.3s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="collapsed"> 
Some text
</div>

<button>Toggle class</button>