Today, I experimented with this concept, stumbling upon this question as my solution involves a small twist.

.flip-container {
  perspective: 1000;
}
.flipper {
  transform-style: preserve-3d;
  display: flex;
  align-items: stretch;
  width: 100%;
  transition: transform 0.6s;
  will-change: transform;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  width: 100%;
  flex: 0 0 auto;
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
  margin-left: -100%;
}

This approach works because items in a row can take the height of the tallest item in that row when using Flexbox. Customize the styles for .front and .back accordingly without specifying their height.

The catch here is that the shorter side may have rendering issues with its height if the other side expands post-rendering (like due to an image loading). It's okay if heights adjust due to window resizing, but it seems problematic when content loads suddenly. One workaround could be placing images within containers with fixed heights if you don't mind deviating from a pure CSS solution. Alternatively, waiting for the image to load before displaying the entire flip card could help, although this might not apply if you aren't using an img element.

Creating Flip Cards nowadays is easier with CSS Grid and without the need for absolute positioning. Check out this simple example:

body {
  background: #1339ac;
  padding: 50px;
}

.flipCard {
  perspective: 1000px;
}
.flipCard .boxes {
  display: grid;
  transition-duration: 0.6s;
  transition-timing-function: ease-in-out;
  transform-style: preserve-3d;
}
.flipCard .boxes .box {
  background: gold;
  padding: 1rem;
  border: 2px solid #000;
  /*---------*/
  grid-row: 1/2;
  grid-column: 1/2;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.flipCard .boxes .box.front {
  transform: rotateX(0deg);
}
.flipCard .boxes .box.back {
  transform: rotateX(-180deg);
}
.flipCard:hover .boxes {
  transform: rotateX(-180deg);
}

<div class="flipCard">
  <div class="boxes">
    <div class="box front">
      <h2>Box 1</h2>
      <ul>
        <li>List Item 01</li>
        <li>List Item 02</li>
        <li>List Item 03</li>
      </ul>
    </div>
    <div class="box back">
      <h2>Box 2</h2>
      <ul>
        <li>List Item 01</li>
        <li>List Item 02</li>
        <li>List Item 03</li>
        <li>List Item 04</li>
        <li>List Item 05</li>
        <li>List Item 06</li>
      </ul>
    </div>
  </div>
</div>

Creating a similar effect to this one without using absolute positioning might be challenging.

To achieve this, you could use JavaScript to calculate the heights dynamically.

You can check out a basic example on CodePen: https://codepen.io/CourtDemone/pen/vXVbGQ

The concept involves moving the footer outside of the flip container and implementing some JavaScript logic like the following:

var heightFront, heightBack;

heightFront = $('.front').height();
heightBack = $('.back').height();

if(heightFront > heightBack){
  $('.flip-container').height(heightFront);
}else{
  $('.flip-container').height(heightBack);
}

I encountered a similar challenge as the one illustrated on the David Walsh blog, where I needed to implement a flip effect within a flex layout. It became evident that utilizing absolute positioning for flipping panels was not yielding the desired results.

To overcome this obstacle, I implemented the following:

• Set relative positioning in the .flipper class
• Defined a fixed height for the block with the .flipper class while allowing different height variations by specifying height: 15em separately
• Assigned top: 0 for the front block and a negative value for the back block

Adjusting the values was necessary to create margins and spaces between elements. Instead of using hover effects, I opted for an onclick event to enhance the user experience, although both options are viable.

<!-- HTML -->
<p>three boxes on a flex basis with an onclick flip effect</p>
<div class='flexinl'>
    <div class='flip-container fronted hand' 
      onclick="this.swapClasses('fronted,backed');">
        <div class="flipper fli300">
            <div class='front c1'>
                <h1>This is front 1</h1>
            </div>
            <div class='back c2'>
                <h1>This is back 1</h1>
            </div>
        </div>
    </div>
    <div class='flip-container fronted hand' 
      onclick="this.swapClasses('fronted,backed');">
        <div class="flipper fli300">
            <div class='front c1'>
                <h1>This is front 2</h1>
            </div>
            <div class='back c2'>
                <h1>This is back 2</h1>
            </div>
        </div>
    </div>
    <div class='flip-container fronted hand' 
      onclick="this.swapClasses('fronted,backed');">
        <div class="flipper fli300">
            <div class='front c1'>
                <h1>This is front 3</h1>
            </div>
            <div class='back c2'>
                <h1>This is back 3</h1>
            </div>
        </div>
    </div>
</div>  

/* CSS */
.c1 {color:white; background-color:green}
.c2 {color:white; background-color:orange}
.hand { cursor: pointer; }

/* based on David Walsh Flipper */
.flip-container {
    perspective: 1000px;
    border: 1px dashed #a9a9a9;
    margin-bottom:1.5em;    
}
  /* flip the pane when has the backed */
.flip-container.backed .flipper {
    transform: rotateY(180deg);
}
.fli300 {height: 15em;}
.fli300 .front {
    height: 12em !important;
}
.fli300 .back {
    height: 12em !important;
    top: -15em;
}

/* flip speed goes here */
.flipper {
    transition: .4s;
    transform-style: preserve-3d;
    position: relative;    
}

/* hide back of pane during swap */
.flipper .front, .flipper .back {
    backface-visibility: hidden;
    position: relative;
    left: 0;
    height: 100%;
    padding: 1.5em;    
}

/* front pane, placed above back */
.flipper .front {
    z-index: -1;
    top: 0;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flipper .back {
    transform: rotateY(180deg);
}

/* some flex stuff */
.flexinl {  
    display: inline-flex; 
    flex-wrap: wrap;  
    justify-content: flex-start;
}
.flexinl > div {padding:0.2em}

/* javascript for swapping classes */

HTMLElement.prototype.swapClasses = function (dosclasses) {
    var clases = dosclasses.split(/\s*\,\s*/);
    var entra = clases[0];
    var sale = clases[1];
    if (this.classList.contains(sale)) {
        this.classList.remove(sale);
        this.classList.add(entra);
    } else {
        this.classList.remove(entra);
        this.classList.add(sale);
    }
    return this;
};

You can view the codepen demo here

You have the ability to make the container adjust to the height of its parent using the .front and .back classes and setting height: inherit;.
JSfiddle: https://jsfiddle.net/9q7xr4ef/

Code Snippet:

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  border: 1px solid #ccc;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 320px;
  height: 427px;
}
.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;
  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  height: inherit;
}
.front,
.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}
.front {
  background: url(http://davidwalsh.name/demo/dwflip.jpg) 0 0 no-repeat;
  z-index: 2;
}
.back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background: #f8f8f8;
}
.front .name {
  font-size: 2em;
  display: inline-block;
  background: rgba(33, 33, 33, 0.9);
  color: #f8f8f8;
  font-family: Courier;
  padding: 5px 10px;
  border-radius: 5px;
  bottom: 60px;
  left: 25%;
  position: absolute;
  text-shadow: 0.1em 0.1em 0.05em #333;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.back-logo {
  position: absolute;
  top: 40px;
  left: 90px;
  width: 160px;
  height: 117px;
  background: url(http://davidwalsh.name/demo/logo.png) 0 0 no-repeat;
}
.back-title {
  font-weight: bold;
  color: #00304a;
  position: absolute;
  top: 180px;
  left: 0;
  right: 0;
  text-align: center;
  text-shadow: 0.1em 0.1em 0.05em #acd7e5;
  font-family: Courier;
  font-size: 2em;
}
.back p {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0 20px;
  font-family: arial;
  line-height: 2em;
}
footer {
  background: red;
}

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="front">
      <span class="name">David Walsh</span>
    </div>
    <div class="back">
      <div class="back-logo"></div>
      <div class="back-title">@davidwalshblog</div>
      <p>Mozilla Web Developer, MooTools & jQuery Consultant, MooTools Core Developer, Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
    </div>
  </div>
  <footer>Here is my footer</footer>
</div>

# 2, one child is relative:
JSfiddle: https://jsfiddle.net/9q7xr4ef/2/