调整包含垂直变换的子项的父项的块高度

Question

我正在尝试使用CSS实现卡在标题区域上的简单溢出效果。问题是如果使用CSS“转换”向上移动卡，则不能正确调整卡的父块高度。与使用“top”属性相同。

这是一个基本的标记和样式，以及demo.

<section class="header"></section>
 <section class="wrapper">
   <article class="card"></article>
   <h1>Content to be right under the card</h1>
</section>

.header {
  background-color: yellow;
  min-height: 400px;
}

.wrapper {
  background-color: grey;
}
.card {
  width: 80%;
  /* position: relative;*/
  margin: 0 auto;
  background-color: red;
  min-height: 400px;
  transform: translateY(-200px);
  /* top: 200px; */
}

正如您将在演示中看到的那样，由于假设文章元素的高度，h1元素的位置太低。理想情况下，它应该放在article元素的正下方。如何在不对这些元素使用其他类型的定位属性的情况下实现此目的。