JSFiddle - React, Tailwind, and code Playground

HTML

<div id="body">
  <div id="container">
    <div id="item-1"></div>
    <div id="item-2"></div>
  </div>
</div>

CSS

#body {
  height: 500px;
  width: 500px;
  background-color: yellow;
  overflow: scroll;
}

#container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#item-1 {
  background-color: red;
  width: 200px;
  height: 100px;
}

#item-2 {
  background: linear-gradient(to right, black, white);
  width: 1000px;
  height: 100px;
}