Overflow-x scrollbars aren't visible on Chrome until I select and drag on content?

Question

I need to make a data grid that works at different screen sizes. A common approach is just to wrap the grid element in a div with overflow-x: auto.

https://codepen.io/adsfdsfhdsafkhdsafjkdhafskjds/pen/eYWEoya

<div class='page'>
  <h1>Heading</h1>
  
  <div class="grid">
    <div class="grid-inner">
      <div>Heading1</div>
      <div>Heading2</div>
      <div>Heading3</div>
      <div>Heading4</div>
      
      <div>Here is come content 1</div>
      <div>Here is come content 2</div>
      <div>Here is come content 3</div>
      <div>Here is come content 4</div>
    </div>
  </div>
</div>
.page {
  background: grey;
  margin: auto;
  max-width: 200px;
}
.grid {
  overflow-x: auto;
}
.grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-inner div {
  padding: 20px;
}

Technically this works but I have a UX concern. On Chrome the scrollbars arn't initially visible so a user might not know there is scrollable content which they can't see:

The only way to scroll on desktop Chrome is to click on the content and drag to the right. At that point the scrollbars appear although content is also highlighted which isnt ideal:

Is it possible to make the scrollbars be permanently visible when the content is wider than it's overflow: auto container and is therefore scrollable? Or is there a totally different approach that is common in this scenario?

Answer 1

Here's one option for you: https://codepen.io/panchroma/pen/wvdrzMe

It should work well on OS X Chrome and Safari and it's easy enough to style the slider the way you want.

::-webkit-scrollbar {
        width: 8px;
        background-color:#aaa;
    }

 ::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: #000;
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }