Why does Firefox have a different scrollbar appearance?

Question

I faced the following problem - in the Firefox browser the scrollbar appearance is different, it is placed inside the div and changes the ul width.

Demo: https://jsfiddle.net/zmatj6s9/

I am trying to figure out what should I change to have the same layout in both browsers. Any thoughts?

.a {
  width: 40px;
  height: 40px;
  background: red;
}

.ul {
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 12px;;
}

.parent {
  display: flex;
}

.content {
  width: 100%;
  background: brown
}

.sidebar {
  overflow: auto;
  height: 200px;
    flex: none;
}

<div class='parent'>
  <div class='sidebar'>
    <ul class='ul'>
      <li>
        <a>
          <div class='a'>
          </div>
        </a>
      </li>
      <li>
        <a>
          <div class='a'>
          </div>
        </a>
      </li>
      <li>
        <a>
          <div class='a'>
          </div>
        </a>
      </li>
      <li>
        <a>
          <div class='a'>
          </div>
        </a>
      </li>
      <li>
        <a>
          <div class='a'>
          </div>
        </a>
      </li>
      <li>
        <a>
          <div class='a'>
          </div>
        </a>
      </li>
      <li>
        <a>
          <div class='a'>
          </div>
        </a>
      </li>
      <li>
        <a>
          <div class='a'>
          </div>
        </a>
      </li>
      <li>
        <a>
          <div class='a'>
          </div>
        </a>
      </li>
    </ul>
  </div>
  <div class='content'>
    
  </div>
</div>

Answer 1

Perhaps is not he solution you want, but is an aproach. If you just extend the ul several pixels and hide the overflow content you will be able to scroll and won't see any scrollbar at all.

As I said, perhaps is not the solution, but I've applied sometimes in my projects and it works fine. You can always use some scrollbar plugin, but if you want it in plane css, I think this is the closer solution. Hope it helps to you.

.parent {
  display: flex;
  flex-flow: row warp;
  justify-content: flex-start;
}

.content {
  flex: 1 0 0%;
  background: brown;
}

.sidebar {
  flex: 0 0 20%;
  height: 200px;
  overflow: hidden;
}

.sidebar ul {
  width: calc(100% + 25px);
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0 10px;
  background: red;
  overflow: hidden;
  overflow-y: scroll;
}

.sidebar ul li {
  padding: 5px 10px;
  padding-right: 35px;
}

.sidebar ul li a {
  display: inline-block;
}

<div class='parent'>
  <div class='sidebar'>
    <ul>
      <li>
        <a href="">ELEMENT 1</a>
      </li>
      <li>
        <a href="">ELEMENT 2</a>
      </li>
      <li>
        <a href="">ELEMENT 3</a>
      </li>
      <li>
        <a href="">ELEMENT 4</a>
      </li>
      <li>
        <a href="">ELEMENT 5</a>
      </li>
      <li>
        <a href="">ELEMENT 6</a>
      </li>
      <li>
        <a href="">ELEMENT 7</a>
      </li>
      <li>
        <a href="">ELEMENT 8</a>
      </li>
      <li>
        <a href="">ELEMENT 9</a>
      </li>
    </ul>
  </div>
  <div class='content'>
    hello
  </div>
</div>

Also I have clean up your code because you have some unnecessary DOM elements, at least for this example.