JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <thead>
    <tr>
      <td></td>
      <th colspan="3"><code>scrollbar-gutter</code></th>
    </tr>
    <tr>
      <td></td>
      <th><code>auto</code></th>
      <th><code>stable</code></th>
      <th><code>stable both-edges</code></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>収まる</th>
      <td>
        <div class="scrollbar-gutter-auto">
          <p>The quick brown fox jumps over the lazy dog.</p>
        </div>
      </td>
      <td>
        <div class="scrollbar-gutter-stable">
          <p>The quick brown fox jumps over the lazy dog.</p>
        </div>
      </td>
      <td>
        <div class="scrollbar-gutter-stable-both-edges">
          <p>The quick brown fox jumps over the lazy dog.</p>
        </div>
      </td>
    </tr>
    <tr>
      <th>はみ出す</th>
      <td>
        <div class="scrollbar-gutter-auto">
          <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
        </div>
      </td>
      <td>
        <div class="scrollbar-gutter-stable">
          <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
        </div>
      </td>
      <td>
        <div class="scrollbar-gutter-stable-both-edges">
          <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS

td {
  padding: 0.5em;
}
.scrollbar-gutter-auto {
  scrollbar-gutter: auto;
}
.scrollbar-gutter-stable {
  scrollbar-gutter: stable;
}
.scrollbar-gutter-stable-both-edges {
  scrollbar-gutter: stable both-edges;
}
div {
  width: 11em;
  height: 6em;
  border: medium solid #039;
  overflow: auto;
}
p {
  margin: 0;
  border: medium dashed #3cf;
}