title: Unselectable scrollbar in Firefox
body: <p>When a scrollable container is an <code>a</code> tag with a <code>href</code> attribute the scrollbar cannot be selected instead the whole container drags. This only occurs in <strong>Firefox</strong>. Edge, Chrome &amp; IE11 seem okay.</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>a {
    display: block;
    width: 150px;
    height: 200px;
    overflow-y: auto;
    /* Demo CSS */
    background: #ddd;
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
  }
  
  /* Demo CSS */
  h3 {
    float: left;
    width: 150px;
    margin: 0px 20px 0px 0px;
  }
  h4 {
    float: left;
    width: 150px;
    margin: 15px 20px 15px 0px;
  }
  * {
    font-family: Arial, sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Demo HTML: --&gt;
  &lt;p&gt;
    When a scrollable container is an &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; tag with a &lt;code&gt;href&lt;/code&gt; attribute then the scrollbar cannot be selected. Instead the whole container drags. This only occurs in &lt;strong&gt;Firefox&lt;/strong&gt;. Edge, Chrome &amp; IE11 seem okay.
  &lt;/p&gt;
  &lt;p&gt;
    &lt;strong&gt;Note: &lt;/strong&gt;Using the mouse wheel to scroll still works.
  &lt;/p&gt;
  &lt;h4&gt;href="#"&lt;/h4&gt;
  &lt;h4&gt;&lt;small&gt;href="javascript:void(0);"&lt;/small&gt;&lt;/h4&gt;
  &lt;h4&gt;No href&lt;/h4&gt;
  &lt;br clear="all" /&gt;
  &lt;!-- Buggy HTML: --&gt;
  &lt;a href="#"&gt;
    &lt;div&gt;
      &lt;div&gt;Row 1&lt;/div&gt;
      &lt;div&gt;Row 2&lt;/div&gt;
      &lt;div&gt;Row 3&lt;/div&gt;
      &lt;div&gt;Row 4&lt;/div&gt;
      &lt;div&gt;Row 5&lt;/div&gt;
      &lt;div&gt;Row 6&lt;/div&gt;
      &lt;div&gt;Row 7&lt;/div&gt;
      &lt;div&gt;Row 8&lt;/div&gt;
      &lt;div&gt;Row 9&lt;/div&gt;
      &lt;div&gt;Row 10&lt;/div&gt;
      &lt;div&gt;Row 11&lt;/div&gt;
      &lt;div&gt;Row 12&lt;/div&gt;
      &lt;div&gt;Row 13&lt;/div&gt;
      &lt;div&gt;Row 14&lt;/div&gt;
      &lt;div&gt;Row 15&lt;/div&gt;
      &lt;div&gt;Row 16&lt;/div&gt;
      &lt;div&gt;Row 17&lt;/div&gt;
      &lt;div&gt;Row 18&lt;/div&gt;
      &lt;div&gt;Row 19&lt;/div&gt;
      &lt;div&gt;Row 20&lt;/div&gt;
      &lt;div&gt;Row 21&lt;/div&gt;
      &lt;div&gt;Row 22&lt;/div&gt;
      &lt;div&gt;Row 23&lt;/div&gt;
      &lt;div&gt;Row 24&lt;/div&gt;
      &lt;div&gt;Row 25&lt;/div&gt;
      &lt;div&gt;Row 26&lt;/div&gt;
      &lt;div&gt;Row 27&lt;/div&gt;
      &lt;div&gt;Row 28&lt;/div&gt;
      &lt;div&gt;Row 29&lt;/div&gt;
      &lt;div&gt;Row 30&lt;/div&gt;
      &lt;div&gt;Row 31&lt;/div&gt;
      &lt;div&gt;Row 32&lt;/div&gt;
      &lt;div&gt;Row 33&lt;/div&gt;
      &lt;div&gt;Row 34&lt;/div&gt;
      &lt;div&gt;Row 35&lt;/div&gt;
      &lt;div&gt;Row 36&lt;/div&gt;
      &lt;div&gt;Row 37&lt;/div&gt;
      &lt;div&gt;Row 38&lt;/div&gt;
      &lt;div&gt;Row 39&lt;/div&gt;
      &lt;div&gt;Row 40&lt;/div&gt;
      &lt;div&gt;Row 41&lt;/div&gt;
      &lt;div&gt;Row 42&lt;/div&gt;
      &lt;div&gt;Row 43&lt;/div&gt;
      &lt;div&gt;Row 44&lt;/div&gt;
      &lt;div&gt;Row 45&lt;/div&gt;
      &lt;div&gt;Row 46&lt;/div&gt;
      &lt;div&gt;Row 47&lt;/div&gt;
      &lt;div&gt;Row 48&lt;/div&gt;
      &lt;div&gt;Row 49&lt;/div&gt;
      &lt;div&gt;Row 50&lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="javascript:void(0);"&gt;
    &lt;div&gt;
      &lt;div&gt;Row 1&lt;/div&gt;
      &lt;div&gt;Row 2&lt;/div&gt;
      &lt;div&gt;Row 3&lt;/div&gt;
      &lt;div&gt;Row 4&lt;/div&gt;
      &lt;div&gt;Row 5&lt;/div&gt;
      &lt;div&gt;Row 6&lt;/div&gt;
      &lt;div&gt;Row 7&lt;/div&gt;
      &lt;div&gt;Row 8&lt;/div&gt;
      &lt;div&gt;Row 9&lt;/div&gt;
      &lt;div&gt;Row 10&lt;/div&gt;
      &lt;div&gt;Row 11&lt;/div&gt;
      &lt;div&gt;Row 12&lt;/div&gt;
      &lt;div&gt;Row 13&lt;/div&gt;
      &lt;div&gt;Row 14&lt;/div&gt;
      &lt;div&gt;Row 15&lt;/div&gt;
      &lt;div&gt;Row 16&lt;/div&gt;
      &lt;div&gt;Row 17&lt;/div&gt;
      &lt;div&gt;Row 18&lt;/div&gt;
      &lt;div&gt;Row 19&lt;/div&gt;
      &lt;div&gt;Row 20&lt;/div&gt;
      &lt;div&gt;Row 21&lt;/div&gt;
      &lt;div&gt;Row 22&lt;/div&gt;
      &lt;div&gt;Row 23&lt;/div&gt;
      &lt;div&gt;Row 24&lt;/div&gt;
      &lt;div&gt;Row 25&lt;/div&gt;
      &lt;div&gt;Row 26&lt;/div&gt;
      &lt;div&gt;Row 27&lt;/div&gt;
      &lt;div&gt;Row 28&lt;/div&gt;
      &lt;div&gt;Row 29&lt;/div&gt;
      &lt;div&gt;Row 30&lt;/div&gt;
      &lt;div&gt;Row 31&lt;/div&gt;
      &lt;div&gt;Row 32&lt;/div&gt;
      &lt;div&gt;Row 33&lt;/div&gt;
      &lt;div&gt;Row 34&lt;/div&gt;
      &lt;div&gt;Row 35&lt;/div&gt;
      &lt;div&gt;Row 36&lt;/div&gt;
      &lt;div&gt;Row 37&lt;/div&gt;
      &lt;div&gt;Row 38&lt;/div&gt;
      &lt;div&gt;Row 39&lt;/div&gt;
      &lt;div&gt;Row 40&lt;/div&gt;
      &lt;div&gt;Row 41&lt;/div&gt;
      &lt;div&gt;Row 42&lt;/div&gt;
      &lt;div&gt;Row 43&lt;/div&gt;
      &lt;div&gt;Row 44&lt;/div&gt;
      &lt;div&gt;Row 45&lt;/div&gt;
      &lt;div&gt;Row 46&lt;/div&gt;
      &lt;div&gt;Row 47&lt;/div&gt;
      &lt;div&gt;Row 48&lt;/div&gt;
      &lt;div&gt;Row 49&lt;/div&gt;
      &lt;div&gt;Row 50&lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a&gt;
    &lt;div&gt;
      &lt;div&gt;Row 1&lt;/div&gt;
      &lt;div&gt;Row 2&lt;/div&gt;
      &lt;div&gt;Row 3&lt;/div&gt;
      &lt;div&gt;Row 4&lt;/div&gt;
      &lt;div&gt;Row 5&lt;/div&gt;
      &lt;div&gt;Row 6&lt;/div&gt;
      &lt;div&gt;Row 7&lt;/div&gt;
      &lt;div&gt;Row 8&lt;/div&gt;
      &lt;div&gt;Row 9&lt;/div&gt;
      &lt;div&gt;Row 10&lt;/div&gt;
      &lt;div&gt;Row 11&lt;/div&gt;
      &lt;div&gt;Row 12&lt;/div&gt;
      &lt;div&gt;Row 13&lt;/div&gt;
      &lt;div&gt;Row 14&lt;/div&gt;
      &lt;div&gt;Row 15&lt;/div&gt;
      &lt;div&gt;Row 16&lt;/div&gt;
      &lt;div&gt;Row 17&lt;/div&gt;
      &lt;div&gt;Row 18&lt;/div&gt;
      &lt;div&gt;Row 19&lt;/div&gt;
      &lt;div&gt;Row 20&lt;/div&gt;
      &lt;div&gt;Row 21&lt;/div&gt;
      &lt;div&gt;Row 22&lt;/div&gt;
      &lt;div&gt;Row 23&lt;/div&gt;
      &lt;div&gt;Row 24&lt;/div&gt;
      &lt;div&gt;Row 25&lt;/div&gt;
      &lt;div&gt;Row 26&lt;/div&gt;
      &lt;div&gt;Row 27&lt;/div&gt;
      &lt;div&gt;Row 28&lt;/div&gt;
      &lt;div&gt;Row 29&lt;/div&gt;
      &lt;div&gt;Row 30&lt;/div&gt;
      &lt;div&gt;Row 31&lt;/div&gt;
      &lt;div&gt;Row 32&lt;/div&gt;
      &lt;div&gt;Row 33&lt;/div&gt;
      &lt;div&gt;Row 34&lt;/div&gt;
      &lt;div&gt;Row 35&lt;/div&gt;
      &lt;div&gt;Row 36&lt;/div&gt;
      &lt;div&gt;Row 37&lt;/div&gt;
      &lt;div&gt;Row 38&lt;/div&gt;
      &lt;div&gt;Row 39&lt;/div&gt;
      &lt;div&gt;Row 40&lt;/div&gt;
      &lt;div&gt;Row 41&lt;/div&gt;
      &lt;div&gt;Row 42&lt;/div&gt;
      &lt;div&gt;Row 43&lt;/div&gt;
      &lt;div&gt;Row 44&lt;/div&gt;
      &lt;div&gt;Row 45&lt;/div&gt;
      &lt;div&gt;Row 46&lt;/div&gt;
      &lt;div&gt;Row 47&lt;/div&gt;
      &lt;div&gt;Row 48&lt;/div&gt;
      &lt;div&gt;Row 49&lt;/div&gt;
      &lt;div&gt;Row 50&lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;!-- Demo HTML: --&gt;
  &lt;br clear="all" /&gt;
  &lt;h3 style="color : red;"&gt;&amp;#10008; Broken&lt;/h3&gt;
  &lt;h3 style="color : red;"&gt;&amp;#10008; Broken&lt;/h3&gt;
  &lt;h3 style="color : green;"&gt;&amp;#10004; Works&lt;/h3&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Removing the <code>href</code> fixes the issue. Is this a Firefox bug?</p>
  
  <p>See 3 examples here: <a href="https://jsfiddle.net/bassmanpaul/80sxosjh" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p><strong>P.S.</strong> I'm aware that <code>a</code> tags are strictly <code>inline</code> elements so aren't really meant to have inner <code>block</code> elements, but I believe there are scenarios that require this and I'm curious to why this issue is occurring.</p>