Glide.js轮播幻灯片高度适配内容问题求助

各位好！我最近在用Glide.js搭建一个轮播组件，核心需求是让每一张幻灯片的高度完全贴合内部内容的实际高度，但折腾了好久都没实现预期效果，实在有点头大🤯

下面是我当前的单张幻灯片结构代码：

<li class="glide__slide">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h4>TITLE</h4>
      <p class="text-bold">SUBTITLE</p>
      <hr style="border-bottom: 2px solid white">
      <p>PARAGRAPH OF TEXT 1</p>
      <p>PARAGRAPH OF TEXT 2</p>
      <button class="flip_front">FLIP</button>
    </div>
    <div class="flip-card-back">
      <button class="flip_back">FLIP</button>
    </div>
  </div>
</li>

我已经把整个轮播做成了可运行的完整示例，能直观看到当前的布局异常情况。有没有经验丰富的大佬能帮我分析下问题出在哪里，或者给个可行的解决方案，让幻灯片高度能自适应内容呀？

备注：内容来源于stack exchange，提问作者Afplaktape