title: Implementing a scroll indicator on the edge of a horizontal-scrolled flex-box div
body: <p>On my site I'm using a flexbox in the navigation bar, which is horizontally scrollable. I used this blogpost's help to implement it, so more or less, we have the same code: <a href="https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation" rel="nofollow noreferrer">https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header class="scroll"&gt;
    &lt;nav&gt;
      &lt;a class="item" href="http://example.com/blog"&gt;Blog&lt;/a&gt;
      &lt;a class="item" href="http://example.com/portfolio"&gt;Portfolio&lt;/a&gt;
      &lt;a class="item" href="http://example.com/downloads"&gt;Downloads&lt;/a&gt;
      &lt;a class="item" href="http://example.com/about"&gt;About&lt;/a&gt;
      &lt;a class="item" href="http://example.com/contact"&gt;Contact&lt;/a&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar; }
  .item {
    flex: 0 0 auto; }
  </code></pre>
  
  <p>What the blogpost did not include though was how to add an indicator to the navbar on the edges, something to indicate that this bar is scrollable and there is more content on the right side of it.</p>
  
  <p>I've looked up a few solutions but none of them fit well with the flexbox technique I've used here. How can this be properly, neatly done? Will it require floats? Thanks in advance!</p>