JSFiddle - React, Tailwind, and code Playground

HTML

<p><a id="toggle" href="#">Toggle class</a></p>
<ol>
    <li>In Google Chrome</li>
    <li>Try to scroll the right paragraph</li>
    <li>Click twice on "Toggle class" to remove the scroll and set it back again</li>
    <li>Try again to scroll (Scroll won't work)</li>
    <li>Resize the window to force a redraw</li>
    <li>Scroll works again</li>
    <li>This seems to happen only when the container is in display flex.</li>
</ol>
<div class="row">
    <div class="col">
        <div id="target" class="overflowing">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis aspernatur reiciendis amet libero quasi laborum unde sint eum dolores vitae dolorum autem nihil quae voluptatum illo a atque velit placeat.</p>
        </div>
    </div>
</div>

CSS

.overflowing {
    overflow-x: auto;
    white-space:nowrap;
}

.row {
    display: flex;
}

.col {
    width: 100%;
}

JavaScript

$('#toggle').on('click', function(e) {
    $('#target').toggleClass('overflowing');
});