Horizontal scrollbar is not working

[sadashivm]

1. App.js

import React from 'react';
import ScrollArea from 'react-scrollbar';

function App() {
let itemElements = [];

for (let i = 1; i <= 40; i = i + 1) {
itemElements.push(
<div className="items">Text Content {i}</div>
)
}

return (
<>
<div style={{ margin: '4em' }}>
<h4>Horizontal scrollbar</h4>
<ScrollArea
className="area"
contentClassName="content"
vertical={false}
smoothScrolling
>
{itemElements}
</ScrollArea>
</div>

<div style={{ margin: '4em' }}>
<h4>Vertical Scrollbar</h4>
<ScrollArea
className="area2"
smoothScrolling
>
{itemElements}
</ScrollArea>
</div>
</>
);
}

export default App;

2. CSS CODE
   .area { height: 80px; width: 300px; border:1px solid red; white-space: nowrap !important; } .items { margin:10px; display: inline-block !important; width: 150px; border:1px solid blue; } .content { width: 500px; } .area2 { border: 1px solid; height: 300px; width: 300px; }

Horizontal scroll is not coming, vertical scroll is working perfectly.
I want to display all the records.
can you please write a code for horizontal scroll.
Please check the attached screen shot

Please send me code for to display all the items using horizontal scroll

[dmytro-petruk-deel]

React v16.11.0
It doesn't work on my side either.

[adkrix]

React 16.13.1
It doesn't work

[ooo2003003v2]

doesnt work on 17.0.2 either