html - 水平滚动 div 在 Firefox 中不起作用

Question

我有一个滚动的 div 包含一个 ul react 。当 li 的数量增加时，分区应该水平滚动。

这是我的代码:

<div className="inner-scrolling">
  <ul className="list">
     <li> item</li>
     ...
  </ul>
</div>

这是CSS:

.inner-scrolling {
  width: 100%;
  max-width: 0;
  overflow-x: auto;
}

.list {
  list-style: none;
  display: inline-flex;
}

这在 Chrome 中工作正常，但在 Firefox 中不工作。我该如何解决？我试过 max-width:500px 但它还不能在 Firefox 中运行。实际上在 Firefox 中，li 移出了 div。

Answer 1

您可以只添加 display: flex , overflow-y: hidden和 overflow-x: scroll到 <ul>容器。

您还需要额外的容器才能在 Firefox 和 Safari 中运行。

所有子元素将排成一行，可水平滚动。

片段:

* {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

.scrolling-container {
  width: 100%;
  overflow-x: auto;
  display: flex;
}

.list {
  display: flex;
}

img {
  max-height: 150px;
  width: 300px;
  object-fit: cover;
}

img:not(:first-child) {
  margin-left: 10px;
}

  <div class="container">
    <div class="scrolling-container">
      <div class="list">
        <img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
        <img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
        <img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
        <img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
        <img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
        <img src="https://www.cowgirlcontractcleaning.com/wp-content/uploads/sites/360/2018/05/placeholder-img.jpg" alt="" />
      </div>
    </div>
  </div>