CSS3列布局子元素溢出求助：数学测试页div.problem超出父容器

我来帮你定位并解决这个溢出问题，核心原因是固定百分比高度与CSS列布局的流式特性冲突，具体分析和修复方案如下：

问题根源 #

你给.problem-3设置了height: 33%/30%的固定百分比高度，但CSS列布局（column-count）的工作逻辑是把内容像报纸一样流式分配到多列中，子元素的百分比高度是基于整个.body容器的总高度，而不是单列的高度。

举个例子：如果.body总高度是600px，分成两列后每列实际可用高度是300px，但每个.problem-3会按总高度计算出200px的高度，3个这样的元素加起来就会超过单列的300px，直接溢出到列外。

另外，.body的height: calc(100% - 7em - 3px)依赖父元素.sheet有明确的高度值，如果.sheet没有设置高度，这个百分比计算会失效，进一步加剧高度混乱。

修复方案 #

方案1：保留列布局，移除固定高度 #

如果想继续使用CSS列布局，只需去掉子元素的固定高度设置，让内容自然流式排列，列布局会自动平衡两列的内容高度：

/* 删掉这两行固定高度代码 */
div.head + div.body div.problem-3 { height: 30%; }
div.problem-3 { height: 33%; }

/* 可选：给问题块设置最小高度，避免内容过少时布局太紧凑 */
div.problem {
  min-height: 120px;
  margin-bottom: 1em; /* 增加问题块之间的间距 */
}

方案2：改用Flexbox实现可控的两列布局 #

如果需要每个问题块在列内保持等高分配，Flexbox是更可靠的选择，调整代码如下：

第一步：修改HTML结构，拆分列容器

<div class="body">
  <div class="problem-column">
    <div class="problem problem-3">1</div>
    <div class="problem problem-3">2</div>
    <div class="problem problem-3">3</div>
  </div>
  <div class="problem-column">
    <div class="problem problem-3">4</div>
    <div class="problem problem-3">5</div>
  </div>
</div>

第二步：更新CSS样式

div.body {
  position: relative;
  display: flex;
  gap: 3em; /* 两列之间的间距，替代column-gap */
  height: calc(100% - 7em - 3px);
  margin-top: 1em;
}
/* 让两个列容器平分宽度 */
div.problem-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1em; /* 列内问题块的间距 */
}
/* 让每个问题块平分列的高度 */
div.problem-3 {
  flex: 1;
  box-sizing: border-box; /* 确保内边距/边框不会增加元素总高度 */
}

这种方式下，每个问题块会自动填充所在列的可用空间，完全不会出现溢出问题，还能保证同列内的问题块高度一致。

额外注意事项 #

确保.sheet元素有明确的高度设置，比如：

.sheet {
  height: 100vh; /* 或者固定高度如A4纸的297mm */
}

这样.body的calc高度计算才能正常生效。

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