title: Bootstrap 4 prevent clipping on overflowing row with horizontal scroll
body: <p>I created a <code>row</code> with horizontal scrolling for all contained <code>col</code>.</p>
  
  <p>I used an answer to this question: <a href="https://stackoverflow.com/questions/47733537/bootstrap-4-horizontal-scroller-div">Bootstrap 4 horizontal scroller div</a></p>
  
  <p>However, I found that the elements inside the <code>container</code> are clipped. Now on some OS-Browser combinations (e.g. MacOS+Chrome) the scrollbar is hidden unless it is hovered by the mouse and in a test one of our users was not able to find the next (clipped) <code>col</code> element.</p>
  
  <p>I'd like to know how to "unclip" the elements beyond the container width, so that user can immediately see that there is more content that requires scrolling.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>The related code is from <a href="https://stackoverflow.com/a/47793060/3098783">this answer</a>, and also posted on <a href="https://codepen.io/inewton/pen/LeEbVL" rel="noreferrer">codepen</a>.</p>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>Note, that I want to prevent the container from being moved on scroll.</p>