JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="outer">
    <div id="inner">12344574734737373646464646464646464646466446
Ruurururruurhrhrhrhfhfhfhfhhfhfhfhfjf
Fuhfhfhfhfhfhfhhfhfhfhfhfhfhfhhffhhfhf
Fhhfhfhfhfhfjfjfjfjfjdjdjdjdjdjdjddjjdjddjj
Ghghhgghggggggghhhgghgghhghghhhhhg
</div>
  </div>
</body>
</html>

CSS

body {
  width: 100%;
  height: 100%;
}

#outer {
  background-color: orange;
  width: 300px;
  height: 300px;
  position: relative;
}

#inner {
  background-color: brown;
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 25%;
  right: 25%;
  overflow-y: auto;
  width: 150px;
  height: 150px;
 word-wrap: break-word;
}