JSFiddle - React, Tailwind, and code Playground

HTML

<main>
    <article>article<br/>article<br/>article</article>
    <article>article<br/>article<br/>article</article>
</main>

(resize the "Result" frame to show/hide the overlap)

CSS

* {
    box-sizing: border-box; /* not the culprit */
}
html {
    height: 100%;
}
body {
    position: relative;
    height: 100%;
    margin: 0;
    background: #999;
}
main {
    overflow: auto;
    background: gold;
    display: flex;
    height: 80%;
    padding: 50px 30px;
}
article {
    flex-shrink: 0;
    font-size: 28px;
    border: 2px solid red;
    margin-right: 30px;
    padding: 10px;
}