Как заставить родительский контейнер расти, когда абсолютно позиционированная область текста увеличивается / переполняется

Question

У меня есть родительский контейнер (div), который содержит абсолютно позиционированную текстовую область, которая увеличивается (вертикально и горизонтально), чтобы соответствовать его содержимому. К сожалению, поскольку он абсолютно позиционирован, когда он достигает определенной ширины или высоты, он переполняет контейнер.

Что я хотел бы сделать, так это увеличить родительский div, чтобы он соответствовал текстовой области, когда она выходит за пределы , Но я совсем не уверен, как это сделать, и был бы рад любому совету. (Примечание: я не могу использовать JQuery)

Редактировать: Приведенный аналогичный пример

Пример кода: https://codepen.io/flubzmcgubz/pen/KKdwYRd

html :

 <div class='frame'>

      <span class="absolute" contenteditable="true">sdfsssssssssssssssssssssssssssssssd</span>
    </div>

css:

.frame {
  background-color: gray;
  height: 400px;
}

.absolute {
  position: absolute;
  left: 80vw;
  width: fit-content;
  height: fit-content;
}