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

是否存在仅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文本的顶部。

问题：由于height的innerContent是300px，我希望belowContent出现在300px下方的outerZeroSize（而不是在其上方）。 CSS / HTML是否可能？

限制条件：


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


Related question（从React Virtualized Table角度来看）。

最佳答案

只需在belowContent上添加300px的页边距。

.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>

关于html - 考虑溢出内容的大小进行定位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52801155/