jquery - CSS3 Flip Card with Automatic Height

Question

I'm using a tutorial to create a flip card effect using CSS3 and jQuery and I'm having issues getting the height to adjust to the content length while having it still flip on the center horizontal.

FIDDLE.

Code:

<div class="flip"> 
    <div class="card"> 
        <div class="face front"> 
            Front<br> Other text.<br> Other text.<br> Other text.<br> Other text.
        </div> 

        <div class="face back"> 
            Back
        </div> 
    </div> 
</div> 

---

body {
 background: #ccc;   
}
.flip {
  -webkit-perspective: 800;
   width: 400px;
   height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotatex(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.flip .card .back {
  -webkit-transform: rotatex(-180deg);
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
}?

---

$('.flip').click(function(){
    $(this).find('.card').addClass('flipped').mouseleave(function(){
        $(this).removeClass('flipped');
    });
    return false;
});?

?

Answer 1

You can trick it, by making the .back position absolute and 100% height. And leave the .front position relative.

.front  {position: relative;}
.back       {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

Note, might be useful in some scenarios: add 2 additional elements to the back, for header and footer, and make the footer position absolute and set it to bottom 0.