JSFiddle - React, Tailwind, and code Playground

HTML

<body width="100%">

    <div id="biggestThing">
        I should be the biggest thing ever.
        <div id="awkwardThing">
            I am smaller, but way off to the side.
        </div>
    </div>
    
    With <tt>overflow: hidden</tt> on the body, I can't scroll to the right to see the whole awkward element. That's good. But if you click and drag below the "biggest thing ever" to the right, we do scroll, exposing the rest of the element. How do I fix this?
</body>

CSS

body {
    overflow: hidden;    
}

#biggestThing {
    border: 1px solid black;
    width: 100%;
    background-color: #eee;
    height: 5em;
}

#awkwardThing {
    width: 200px;
    border: 1px solid black;
    background-color: #dee;
    position: absolute;
    right: -100px;
}