JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Editable text field:</h2>
<div class="wrapper">
    <div id="editable" contenteditable spellcheck=false></div>
</div>

CSS

body, .wrapper {
    padding: 10px;
}

#editable {
    position: relative;
    height: 100px;
    width: 200px;
    border: 1px solid gray;
    overflow: hidden;
}

JavaScript

$(function() {
    
    var editableElement = $('#editable'), clonedElement;
    
    // Revert any scrolling                    
    editableElement.on("scroll", function(event) {
        editableElement.scrollTop(0);
        console.log("bottom");
        // Try to prevent scrolling completely (doesn't seem to work)
        event.preventDefault();
        return false;
    });
    
    // Switch overflow visibility on and off again on each keystroke.
    // To avoid flickering, a cloned element is positioned below the input area
    // and switched on while we hide the overflowing element.
    editableElement.on("keydown", function() {
        
        // Create a cloned input element below the original one
        if (!clonedElement) {
            var zIndex = editableElement.css('zIndex');
            if (parseInt(zIndex, 10) == NaN) {
                zIndex = 10;
                editableElement.css({zIndex: zIndex});
            }    
                          
            clonedElement = editableElement.clone();
            clonedElement.css({
                zIndex: zIndex-1,
                position: 'absolute',
                top: editableElement.offset().top,
                left: editableElement.offset().left,
                overflow: 'hidden',
                // Set pseudo focus highlighting for webkit
                // (needs to be adapted for other browsers)
                outline: 'auto 5px -webkit-focus-ring-color'
            });
            editableElement.before(clonedElement);
        } else {
            // Update contents of the cloned element from the original one
            clonedElement.html(editableElement.html());
        }
        
        // Here comes the hack:
        //   - set overflow visible but hide element via opactity.
        //   - show cloned element in the meantime
        clonedElement.css({opacity: 1});
        editableElement.css({overflow: 'visible', opacity: 0});
        
        // Immediately turn of overflow...