JSFiddle - React, Tailwind, and code Playground
HTML
<!--
The same thing also happens if you:
* Change `margin: auto;` to `justify-self: start;`
* Remove `margin: auto;` and add `justify-content: start;` to the grid
Since they all cause the grid item to size exactly to its maximum size.
-->
<div style="display: grid; height: 300px;">
<div style="margin: auto; overflow: auto; height: 100px;">
<div style="width: 100px; height: 200px;"></div>
</div>
</div>