JSFiddle - React, Tailwind, and code Playground

by joestrong

HTML

<div class="WideContainer">
    <div class="Container">
        <div class="CrazyFeature"></div>
        <p>This is your site content</p>
        <p>The red box should not create scrollbars when off-screen</p>
    </div>
</div>

CSS

.WideContainer{
    overflow-x: hidden;
    min-width: 300px;  
}
.Container{
    width: 300px;
    min-height: 200px;
    border: 1px solid #000;  
    margin: 20px auto 5px;
    position: relative;
}
.CrazyFeature{
    width: 150px;
    height: 50px;
    position: absolute;
    right: -75px;
    top: 50px;
    border: 1px solid red;
}