JSFiddle - React, Tailwind, and code Playground

HTML

<h1>This is what is want, vertical scroll:</h1>
<div class="box">
    sdf s fsdf sdf sdfsdfsdfsd sdfsdfsd f sdf sf fsdf sd fs fsfs fsdfsfs fs fsd fsdfsfs f
    sdf s fsdf sdf sdfsdfsdfsd sdfsdfsd f sdf sf fsdf sd fs fsfs fsdfsfs fs fsd fsdfsfs f
    sdf s fsdf sdf sdfsdfsdfsd sdfsdfsd f sdf sf fsdf sd fs fsfs fsdfsfs fs fsd fsdfsfs f
    sdf s fsdf sdf sdfsdfsdfsd sdfsdfsd f sdf sf fsdf sd fs fsfs fsdfsfs fs fsd fsdfsfs f
    sdf s fsdf sdf sdfsdfsdfsd sdfsdfsd f sdf sf fsdf sd fs fsfs fsdfsfs fs fsd fsdfsfs f
    sdf s fsdf sdf sdfsdfsdfsd sdfsdfsd f sdf sf fsdf sd fs fsfs fsdfsfs fs fsd fsdfsfs f
    sdf s fsdf sdf sdfsdfsdfsd sdfsdfsd f sdf sf fsdf sd fs fsfs fsdfsfs fs fsd fsdfsfs f
    
    
</div>

<br/><br/>

<h1>When a word is too long, i want it to be wrapped on next line.</h1>
<h1>I don't want horizontal scroll.</h1>
<div class="box">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

CSS

.box {
    width: 400px;
    height: 100px;
    overflow: auto;
    border: 1px gold solid; 
}

h1 {
  font-weight: bold;
  color: orange;  
}

JavaScript

s f