JSFiddle - React, Tailwind, and code Playground

HTML

<div class="boxA">boxA  
  <div class="boxB">boxB</div>
</div>

CSS

@media all and (max-width: 1001px) {
  body {
    overflow-x: hidden;
  }
}

.boxA {
    background: yellow;
    width: 800px;
    height: 600px;
}

.boxB {
    background: aqua;
    width: 1000px;
    height: 400px;
    overflow-x: hidden;
}