title: Hide vertical scrollbar but still scroll for Firefox/IE/Edge
body: <p>I know this has been covered a lot here, but none of the solutions seem to work for me. The scrollbar is still showing up on Windows OS (Firefox, Edge &amp; IE).</p>
  
  <p><code>Note: I don't want to mess with padding/margins</code></p>
  
  <p>I can make it disappear but I loose scroll functionality. Here are some of the things I have tried and I may forget a few since I have gone through so many iterations.</p>
  
  <pre><code>::-webkit-scrollbar { width: 0px; }
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style: none;
  overflow: -moz-hidden-scrollable;
  </code></pre>
  
  <p>There have been a few others as well, but like I said, nothing is working. I did see some common solutions being altering the padding to faux disappear the scroll bar but I don't want to do this for fear it may break styling on some devices.</p>
  
  <p>I also saw some suggestions to do pure javascript, subtracting child component width from parent component width or something like that but this was a very similar approach, just more dynamic which I also do not want todo.</p>
  
  <p>I am trying to achieve this with pure CSS. Ideas?</p>
  
  <p>Current code</p>
  
  <pre><code>.rec-left--body {
        padding: 0px 20px;
        .form-content {
          overflow-y: scroll;                // Chrome    &lt;&lt;  removes scrollbar
          overflow-x: hidden;                // Chrome    &lt;&lt;  removes scrollbar
          -ms-overflow-style: none;          // IE 10+    &lt;&lt;  removes scrollbar
          overflow: -moz-hidden-scrollable;  // Firefox   &lt;&lt;  removes scrollbar
          height: 48vh;
          margin: 10px 0px;
          padding: 0 15px;
          @media (min-width: $screen-sm) {
            height: 325px;
            padding: 0 10px;
          }
          .form-content::-webkit-scrollbar {
            width: 0px;
          }
  </code></pre>