JSFiddle - React, Tailwind, and code Playground

HTML

Both boxes must vertically scroll together.
Just the second box must horizontally scroll.

<div class="container">
  <div class="first">
  <div class="large-content"></div>
  </div>
  <div class="second">
    <div class="large-content"></div>
  </div>
</div>

CSS

div {
  display: flex;
}

.container {
  max-width: 300px;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}

.first {
  min-width: 100px;
  max-width: 100px;
  background: linear-gradient(red, pink);
  overflow-y: hidden;
}

.second {
  background: linear-gradient(blue, purple);
  overflow-x: auto;
  overflow-y: hidden;
}

.large-content {
  min-width: 1000px;
  max-width: 1000px;
  min-height: 1000px;
  min-height: 1000px;
}