Height of parent should be 100% of childs height

Question

I have a glide js carousel of which I want the slides to be 100% of the content height. Can't figure out why it's not working...

<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>

See the complete working carousel: https://codepen.io/Afplaktape/pen/Yzrqmww

Answer 1

Checked your codepen, and by removing 2 rules, the issue was solved :

1- delete height of the .glide__slide

2- delete position: absolute from .flip-card-front and .flip-card-back

In short, the problem is that cards were positioned absolute and that prevents parent elements to adjust their height according to child elements height.

Here is another Q/A about the same issue that can be helpful.