翻转卡片并让父母适应可见的卡片大小

Question

我正在尝试制作翻转卡行为。

我无法解决的问题是，如果卡片的尺寸不同，如何让父母适应新尺寸？

如果我使用position: absolute;制作卡片，则父母不知道大小，因为他们获得了新的渲染定位。如果没有绝对位置，他们就不会使用相同的垂直空间，而只是堆叠在一起......

我是否必须使用JavaScript操纵父级的大小和子/卡的位置？

这意味着读取并设置父元素的宽度和高度以及第二张卡片的负边距来自上层卡片jsFiddle (link)

有没有办法只使用CSS？

CSS的非正确行为示例：

＆＃13;

＆＃13;

// just a animation for the example
let states = ['rotateY(-180deg)', 'rotateY(0deg)'];
const a = document.getElementById('card-a');
const b = document.getElementById('card-b');

function flip() {
  a.style.transform = states[0];
  b.style.transform = states[1];
  states = states.reverse();
}

setInterval(flip, 3000);

＆＃13;

#dialog {
  position: relative;
  display: inline-block;
  border: 2px solid black;
}

#dialog>div {
  transition: transform 3s;
  backface-visibility: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

#card-a {
  transform: rotateY(0deg);
}

#card-b {
  transform: rotateY(-180deg);
}

＆＃13;

<div id="dialog">
  <div id="card-a">
    <img src="http://placehold.it/75/75" />
  </div>
  <div id="card-b">
    <img src="http://placehold.it/250/250" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;