JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Part 1: overflow:hidden scroller -->
1. Open this page with Google Chrome<br />
                2. Click on the input field and drag it to right<br />
                3. Notice that the div scrolls to right<br />
                On Opera, Firefox, IE 8+ works fine, the scroller remains locked with "overflow: hidden".


        <div id="w" class="overflow-hidden scroller">
            <div class="big-panel">
                <div class="inline-scrollable">
                    <div class="inner">
                        Overflow-hidden w fix <input id="tx" type="text">
                    </div>
                </div>                
                <div class="inline-scrollable">
                    <div class="inner">
                        Field 2 <input type="text">
                    </div>
                </div>                
            </div>
        </div>

        <div class="overflow-hidden scroller">
            <div class="big-panel">
                <div class="inline-scrollable">
                    <div class="inner">
                        Overflow-hidden w/o fix <input type="text">
                    </div>
                </div>                
                <div class="inline-scrollable">
                    <div class="inner">
                        Field 2 <input type="text">
                    </div>
                </div>                
            </div>
        </div>

<!-- Part 2: overflow:auto scroller -->
        This scroller has "overflow: auto" set, and it scrolls fine with input text drag on FF and Chrome <br />
        <div class="overflow-auto scroller">
            <div class="big-panel">
                <div class="inline-scrollable">
                    <div class="inner">
                        overflow:auto <input type="text">
                    </div>
                </div>                
                <div class="inline-scrollable">
                    <div class="inner">
                        Field 2...

CSS

input { 
    padding:1px; /* The evil cause of the bug */
    /*padding:0px; /* Works fine on every browser */
}

.scroller {
    border: 1px black solid; 
    width: 400px;
    margin: 15px 0;
}

.overflow-auto {
    overflow: auto;
    height: 35px;
}

.overflow-hidden {
    overflow: hidden; 
}

.big-panel {
    width: 850px;
}
    
.inline-scrollable {
    border: 1px red solid; 
    width: 400px; 
    display: inline-block; 
}

.inner {
    display: block;
}

JavaScript

var tx = document.getElementById('tx'),
    bod = document.body;

tx.addEventListener('mousedown', tx_ondown);

function tx_ondown() {
    bod.addEventListener('mousemove', b_onmove);
    bod.addEventListener('mouseup', b_onup);  
    bod.addEventListener('mouseout', b_onup);    
}

function b_onmove() {
    tx.style.pointerEvents = 'none';
    tx.style.display = 'none';
    
    setTimeout(function() {
        tx.style.display = '';
    }, 0);
    bod.removeEventListener('mousemove', b_onmove);
}

function b_onup() {
    if (tx.style.pointerEvents === 'none') {
        tx.style.pointerEvents = '';
    } else {
        bod.removeEventListener('mousemove', b_onmove);
    }
    bod.removeEventListener('mouseup', b_onup);
    bod.removeEventListener('mouseout', b_onup);        
}