text div bottom to top

HTML

<div>

<div contenteditable=true class="canvas">
text goes from bottom to top, as desired but when inserting so much text that the height is not enough, the size of the div will expand instead of scroll. Copy /paste this text multiple times to see the result.<br>

The goal is that the div size does not change ever and at the same time, writing starts at the bottom of the empty div.

When changing position to absolute, the div will keep it's size but the caret at the empty div will be placed top left
</div>

</div>

CSS

.canvas {
        
        background-color:   #fff;
        box-shadow:         0 4px 14px -4px #919191;
        border:             1px solid #e0e0e0;
        height: 200px;
        width:  400px;
        margin: 20px;
        padding-left: 20px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-right: 20px;
        word-wrap:break-word; 
        vertical-align: bottom;
        display: table-cell;
        word-wrap:break-word; 
        overflow: scroll; 
      
        vertical-align: bottom;
        display: table-cell;
        
        position:relative;
    }