JSFiddle - React, Tailwind, and code Playground

HTML

<p>scroll bar thakes up the whole div:</p>
<div class = "auto">
      <div>
          a<br />
          b<br />
          c<br />
          d<br />
      </div>
    </div>
<p>it should look like this :</p>
<div class = "scroll">
      <div>
          a<br />
          b<br />
          c<br />
          d<br />
      </div>
    </div>   

<p>but without this effect when there is no overflow:</p>
<div class = "scroll">
      <div>
          a<br />
          b<br />
          c<br />
      </div>
    </div>

CSS

.auto   {
           border:1px solid green;
           height:70px; 
           overflow-y:auto; 
           display:inline-block;
          }

.scroll{
           border:1px solid red;
           height:70px; 
           overflow-y:scroll; 
           display:inline-block;
          }