С учетом размера переполненного контента для позиционирования

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.

Вопрос: Поскольку height из innerContent равно 300px, я бы хотел, чтобы belowContent появился 300px ниже outerZeroSize (вместо него сверху).Возможно ли это с помощью CSS / HTML?

Ограничения:

• Предположим, что .outerZeroSize и .innerContent не могут измениться (ни часть HTML, ни часть CSS)потому что они получены от сторонних разработчиков ( React-Virtualized Table ).
• ОБНОВЛЕНИЕ: Высота .innerContent может изменяться динамически, 300px - этопросто пример (так что просто смещение .belowContent на эту же сумму тоже не вариант).
• Что можно изменить, это .belowContent (HTML и CSS), и, конечно, можно добавитьматериал вокруг .outerZeroSize деление

Смежный вопрос (с точки зрения React Virtualized Table).

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>