JSFiddle - React, Tailwind, and code Playground

by Garth Edwards

HTML

<div class="div1">
  <div class="div2">
    <div id="map">
      Lorem ipsum dolor sit amet, discere vivendum vim ad,       nisl stet vis eu, in sea dicit utamur. No mea choro       referrentur, ut ignota nominati volutpat nec, nonumy       impetus voluptua ius te. Ei persius liberavisse ius,       qui eu libris omnium democritum. Sed ea summo             invidunt, ea stet sadipscing nam. Vis no sensibus         vulputate.
      
      Lorem ipsum dolor sit amet, discere vivendum vim ad,       nisl stet vis eu, in sea dicit utamur. No mea choro       referrentur, ut ignota nominati volutpat nec, nonumy       impetus voluptua ius te. Ei persius liberavisse ius,       qui eu libris omnium democritum. Sed ea summo             invidunt, ea stet sadipscing nam. Vis no sensibus         vulputate.
    </div>
  </div>
</div>

CSS

.div1 {
  position: absolute;
  top: 100px;
  right: 100px;
  bottom: 100px;
  left: 100px;
  background-color: red;
  overflow: hidden;
  border: 5px solid red;
}

.div2 {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -100px;
  left: 0px;
  background-color: blue;
  overflow-x: auto;
  overflow-y: hidden;
}

#map {
  position: absolute;
  top: 0;
  bottom: 110px;
  width: 1200px;
  background-color: orange;
}

JavaScript

$(document).ready(function() {

});