這段代碼適用于所有其他瀏覽器，但在Safari瀏覽器上右空格是不對稱的，但在其他瀏覽器上一切正常。我知道Safari不支持此屬性，我正在尋找解決方案。

.card {
  background: red;
  padding: 24px 12px 24px 24px;
  width: 240px;
  margin: 0 auto;
  height: 160px;
}

.scrollable-content {
  scrollbar-gutter: stable;
  overflow-y: auto;
  scrollbar-width: thin;
}

.scrollable-content::-webkit-scrollbar {
  width: 12px;
  background-color: blue;
}

.scrollable-content::-webkit-scrollbar-track {
  border-radius: 8px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: rgba(136, 136, 136, 0.5);
  border: 4px solid transparent;
  border-radius: 8px;
  height: 56px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background-color: #888888;
}

.card-body {
  background-color: yellow;
}

<div class="card scrollable-content">
  <div class="card-body">
    test lorem100
  </div>
</div>