Horizontal scrolling div not working in Firefox

user_13883041 0
Viewed 1219

I have a scrolling div contain a ul in react. When the number of liincreased, the division should scroll horizontally.

this is my code:

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

this is css:

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

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

This is working correctly in Chrome but not working in Firefox. How can I fix it? I tried max-width:500px but it doesn't work in Firefox yet. actually in Firefox, lis move out of the div.

firefox scroll css html
2 Answers

You can just add display: flex, overflow-y: hidden and overflow-x: scroll to the <ul> container.

You will also need extra containers for it to be able to work in Firefox and Safari.

All the child elements will be in a row, horizontally scrollable.

Snippet:

* {
  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>

user_34900100

You can try this code. There are multiple corrections/additions I have done in the code below.

.outerDiv {
    max-width: 500px;
    margin: 0 auto;
}
.inner-scrolling {
    width: 100%;
    overflow-x: auto;
    display: flex;
}
.list {
    width: 100%;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
}
.list li {
    width: 100px; /* Temporary width is given you can remove it later on. */
    display: inline-block;
    padding: 10px 20px;
}

<div class="outerDiv">
    <div class="inner-scrolling">
        <ul class="list">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
            <li>item 7</li>
            <li>item 8</li>
            <li>item 9</li>
            <li>item 10</li>
        </ul>
    </div>
</div>
user_99073340
Related