readme.md

This code is a pared down version of:

Max-height 100% animation with flex by JChiem

Found through: w3c/csswg-drafts#626

max_height.css

.expander {
  display: flex;
}
  .expander__container {
    width: 100%;
  }
  .expander__content {
    position: relative;
    transition: all .3s ease;
    max-height: 0;
    overflow: hidden;
  }
  .expander__content--open {
    max-height: 100%;
  }
.expander2 {
  display: flex;
}
  .expander__container2 {
    position: relative;
    transition: all .3s ease;
    max-height: 0;
    overflow: hidden;
  }
  .expander__container2--open {
    max-height: 100%;
  }

max_height.html

<div class="container">
  <div class="expander">
    <div class="expander__container">
      <button class="expander__button">Toggle content</button>
      <div class="expander__content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et faucibus turpis. Nam lacinia ex non maximus rhoncus ultrices odio ut laoreet.</p>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <button class="expander__button2">Toggle content 2 (Doesnt work)</button>
  <div class="expander2">
    <div class="expander__container2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et faucibus turpis. Nam lacinia ex non maximus rhoncus ultrices odio ut laoreet.</p>
    </div>
  </div>
</div>

max_height.js

const btn = document.querySelector('.expander__button');
const content = document.querySelector('.expander__content');

btn.addEventListener('click', (e) => {
  content.classList.toggle('expander__content--open');  
});

const btn2 = document.querySelector('.expander__button2');
const content2 = document.querySelector('.expander__container2');

btn2.addEventListener('click', (e) => {
  content2.classList.toggle('expander__container2--open');  
});