scrollbar-gutter sample

by Kyle Mitofsky

HTML

<h1><code>scrollbar-gutter</code> sample</h1>

<div class="grid">

  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: auto;
    </pre>
    <div class="card-body">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
  </div>
  
  <div class="card">
    <pre class="card-header">
overflow: auto;
scrollbar-gutter: stable;
    </pre>
    <div class="card-body scrollbar-stable">Doggo ipsum length boy noodle horse doing me a frighten doggorino, woofer he made many woofs. Thicc puggorino smol borking doggo with a long snoot for pats shibe long woofer very hand that feed shibe pats, vvv wow such tempt long woofer heckin fluffer. Long water shoob smol corgo sub woofer</div>
  </div>
  
</div>







<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
    About this SO question:
    <a href='https://stackoverflow.com/q/21367441/1366033'>
        Make scroll bar take no space
    </a>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
code,pre {
  font-family: 'Source Code Pro', monospace;
}

body {
  padding: 16px;
}
.grid {
    display: grid;
    grid-template-columns: repeat(2, 273px);
    grid-gap: 16px;
}
.card-header {
  margin-bottom: 4px;
  white-space: pre-line;
  font-weight: bold;
}
.card-body {
  overflow: auto;
  border: 1px solid black;
  height: 120px;
  
}
.scrollbar-stable {
  scrollbar-gutter: stable;
}