Javascript 如何使文本流向下一行，并隐藏顶部？

我正在处理计算器的显示部分。我有一个div，里面有两个div，每个div都有文本

<div>
<div>I'm text</div>
<div>I'm text</div>
</div>

---

Codepen:“

我还没有找到CSS/HTML解决方案的答案。但是，我转向jQuery/JavaScript，在每次更新#内存分区后调用下面的函数，解决了我的问题

function heightCheck(str) {

      console.log(str.substr(1));
      console.log('memory: ' + $("#memory").height());
      while ($("#memory").height()>30) {
            str=str.substr(1);
            $("#memory").text(str);
            console.log(str);
            console.log($("#memory").height());
      }

}

对#内存块的此更改导致：

添加了显示：柔性和柔性流：列反向

#memory{
     font-size: 15px;
     padding-right: 3px;
     line-height: 15px;
     margin-top: 5px;
     padding-left: 12px;
     color: #767676;
     margin-bottom: -7px;
     word-wrap: break-word;
     height: 30px;
     width: 207px;
     overflow: hidden;
     display: flex;
     flex-flow: column-reverse;
}

function heightCheck(str) {

      console.log(str.substr(1));
      console.log('memory: ' + $("#memory").height());
      while ($("#memory").height()>30) {
            str=str.substr(1);
            $("#memory").text(str);
            console.log(str);
            console.log($("#memory").height());
      }

}

#memory{
     font-size: 15px;
     padding-right: 3px;
     line-height: 15px;
     margin-top: 5px;
     padding-left: 12px;
     color: #767676;
     margin-bottom: -7px;
     word-wrap: break-word;
     height: 30px;
     width: 207px;
     overflow: hidden;
     display: flex;
     flex-flow: column-reverse;
}