你说得没错，在标准CSS流式布局里，父元素高度默认由子元素撑开，没法直接让父元素高度等于子元素高度的50%——因为CSS的依赖逻辑是子元素基于父元素，反过来的动态高度计算没有原生支持。不过我们可以用一些CSS技巧实现类似效果，下面给你两种可行方案：

方案一：缩放子元素+负边距（视觉与布局高度同步） #

这个方法会把子元素的视觉高度和父元素的布局高度都调整为子元素原始高度的50%，适合需要内容按比例缩放的场景：

<div class="parent">
  <div class="child">
    <!-- 放置你的可变内容 -->
  </div>
</div>

.parent {
  background: red;
  width: 200px;
  overflow: hidden; /* 隐藏缩放后可能溢出的部分 */
}

.child {
  background: blue;
  width: 200px;
  transform: scaleY(0.5); /* 垂直缩放到原高度的50% */
  transform-origin: top center; /* 把缩放原点设为顶部，避免内容向上偏移 */
  margin-bottom: -50%; /* 抵消子元素在布局中的多余高度，让父元素高度刚好是子元素原始高度的50% */
}

原理：transform: scaleY(0.5)只会改变子元素的视觉高度，不会修改它在布局中占据的空间；而margin-bottom: -50%会将父元素的高度“压缩”到子元素原始高度的一半，刚好和缩放后的视觉高度匹配。

方案二：仅裁剪内容，不缩放（保持内容原始大小） #

如果你希望子元素内容保持原始尺寸，只是父元素只显示上半部分，可以用绝对定位配合裁剪实现：

.parent {
  background: red;
  width: 200px;
  position: relative;
  overflow: hidden; /* 裁剪超出父元素的子内容 */
}

.child {
  background: blue;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

/* 用伪元素撑开父元素高度为子元素的50% */
.parent::before {
  content: "";
  float: left;
  width: 100%;
  height: 50%;
  margin-top: -50%; /* 向上偏移，让父元素高度等于子元素高度的一半 */
}

这个方案的核心是用父元素的伪元素间接撑开父元素高度为子元素的50%，同时子元素绝对定位在父元素内，超出部分被overflow: hidden裁剪。

这两种方案都是纯CSS技巧，能适配子元素高度可变的场景，你可以根据内容显示需求选择合适的方案。

内容的提问来源于stack exchange，提问作者Berend