Javascript 外部DIV与内部DIV一起包裹和向上扩展

这里需要一点帮助。谢谢：）

我正在努力研究如何使外部div包裹内部div，并随着内部内容可编辑div向上扩展

内部div应该从下到上展开，外部div应该包裹它（绿色应该包裹红色）并随之展开

注意：在红色div中按SHIFT+ENTER键可使其向上展开

我在下面的代码笔中有一个例子

测试
测试

您可以使用flexbox：

.outer{
背景：绿色；
显示器：flex；
弯曲方向：立柱；
/*一些最小宽度*/
最小高度：50vh；
}
.内部{
背景：红色；
页边顶部：自动；
}

测试
测试

两者都必须是绝对值，包装高度必须为100%

<div style="background-color:green;  height: 100%; position: absolute;">
wrapper                                 
  <div id="example" style="border: 1px solid red; position: absolute; bottom: 0;">
    inner
  </div>
</div>

包装纸
内部的