为什么 Firefox 的滚动条外观不同？

Question

我遇到了以下问题 - 在 Firefox 浏览器中，滚动条外观不同，它放置在 div 内并更改 ul 宽度。

演示： https://jsfiddle.net/zmatj6s9/

我正在尝试找出应该更改为什么在两个浏览器中具有相同的布局。有什么想法吗？

.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

也许他不是您想要的解决方案，而是一种方法。如果您只是将 ul 扩展几个像素并隐藏溢出内容，您将能够滚动并且根本看不到任何滚动条。

正如我所说，也许不是解决方案，但我有时在我的项目中应用过并且效果很好。你总是可以使用一些滚动条插件，但如果你想在平面CSS中使用它，我认为这是更接近的解决方案。希望对您有帮助。

.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>

我还清理了你的代码，因为你有一些不必要的 DOM 元素，至少对于这个例子来说是这样。