Horizontal scrolling div not working in Firefox - html

Question

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.

Answer 1

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>

Answer 2

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>