title: Swipe buttons/menu with CSS
body: <p>Here are six buttons in the container of 300px width. As you can see the buttons are jumping into new row upon the lack of space which is expected. I'm wondering if there's a way to keep the buttons in one line, but with the possibility of swiping them to the right on mobile device? Box shadow would indicate that there are more buttons to the right.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap {
    width: 300px;
    box-shadow: 8px -5px 20px 0px lightgrey;
  }
  
  button {
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
    &lt;button&gt;Button 1&lt;/button&gt;
    &lt;button&gt;Button 2&lt;/button&gt;
    &lt;button&gt;Button 3&lt;/button&gt;
    &lt;button&gt;Button 4&lt;/button&gt;
    &lt;button&gt;Button 5&lt;/button&gt;
    &lt;button&gt;Button 6&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>