Масштабируйте кусок html с помощью трансформации и корректируйте высоту

Если вы масштабируете кусок html, это не влияет на компоновку окружения, как показано в этот код.

body {
  font-family: system-ui;
}

.item {
  border: 1px solid #ccc;
  transform-origin: 0 0;
  transform: scale(2);
}

<div class = "item">Item</div>
<div>What comes after</div>

Мне интересно, есть ли общий способ исправить высоту макета масштабированного html, чтобы следующие элементы имели правильное положение и, в частности, не перекрывались.

Под общим я подразумеваю, что это должно быть решение, которое

• независимо от содержимого масштабированного html - изменение содержимого должно работать,
• работает с html-контентом, который зависит от устройств px и rem и
• тот, который позволяет использовать разные коэффициенты масштабирования.

Я подозреваю, что это невозможно (относительные единицы, такие как 100%, относятся к элементу в transforms, но к родительскому элементу в heights), но я хочу уточнить у экспертов.

Реальную проблему, вызвавшую этот вопрос, можно обойти в любом случае, но было бы более элегантно, если бы в обходном пути не было необходимости.