考虑溢出内容的大小进行定位

Question

是否有一种仅限 CSS/HTML 的方法来考虑溢出内容的大小？考虑下面的例子：

.outerZeroSize {
  width: 0px;
  height: 0px;
  overflow: visible visible;
}

.innerContent {
  width: 200px;
  height: 300px;
}

.belowContent {
  
}

<div class="outerZeroSize">
  <div class="innerContent">
    Some content<br/>
    Some more content <br/>
    And some more
  </div>
</div>
<div class="belowContent">Content below</div>

div belowContent 中的文本最终位于 innerContent 文本的顶部。

问题：由于innerContent 的height 是300px，我希望belowContent 出现在300px 下方outerZeroSize 下方（而不是在其顶部）。这可以用 CSS/HTML 实现吗？

约束：

• 假设 .outerZeroSize 和 .innerContent 不能更改（HTML 和 CSS 部分都不是），因为它们来自第三方 (React-Virtualized Table)。
• 更新：.innerContent 的高度可以动态变化，300px 只是一个示例（因此也不能选择将.belowContent 偏移相同的数量）。
• 可以更改的是.belowContent（HTML 和 CSS），当然也可以在.outerZeroSize div 周围添加内容。

Related question（从 React 虚拟化表的角度来看）。

Answer 1

只需将 300px margin-top 添加到belowContent。

.outerZeroSize {
  width: 0px;
  height: 0px;
  overflow: visible visible;
}

.innerContent {
  width: 200px;
  height: 300px;
}

.belowContent {
  margin-top: 300px;
}

<div class="outerZeroSize">
  <div class="innerContent">
    Some content<br/>
    Some more content <br/>
    And some more
  </div>
</div>
<div class="belowContent">Content below</div>

---

另一种解决方案是将belowContent 移动到outerZeroSize 中。

.outerZeroSize {
  width: 0px;
  height: 0px;
  overflow: visible visible;
}

.innerContent {
  width: 200px;
  height: 300px;
}

.belowContent {
  width: 200px;
}

<div class="outerZeroSize">
  <div class="innerContent">
    Some content<br/>
    Some more content <br/>
    And some more
  </div>
  <div class="belowContent">Content below</div>
</div>