reactjs - horizontal scroll bar fails to show when content is a group of buttons

I'm running Next.js v13.1.1 & react 18.2.0.
and I'm unable to add a horizontal scroll bar to a div that has buttons for content.

this does not seem to be a browser issue ( standard html renders as expected )
this also does not happen (in react.js/next.js) when the div's content is simple text.

in other words :

1. div's content is text -> works as expected ( the horizontal scrollbar is shown ):

div style={{width:"100px",height:"30px",overflowX: "auto",overflowY: "hidden"}}>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

..../div...

2. when div's content is a group of buttons -> the horizontal scrollbar is not shown :

...div style={{width:"100px",height:"30px",overflowX: "auto",overflowY:"hidden"}}...

...input type="button" value="omer1"/...

...input type="button" value="omer2"/...

...input type="button" value="omer3"/...
.
.
.

.../div...

note that this if for the exact same inline style.
this is for both firefox 58.0.2 & chrome 80.0.3987.132.

• i am able to show a vertical scrollbar for buttons with

style={{width:"100px",height:"30px",overflowX: "hidden",overflowY:"auto"}}

and

style={{width:"100px",height:"30px",overflow:"auto"}}

but this is not what I wish to do

( sorry i wasn't able to diplay the code properly, I only manged to show the code by replacing '<' and '>' with '...' )

any help would be appreciated

I wanted this to be a comment, But I'm restricted.

I'd like to know, do the buttons sit on one line, or are they on top of each other?

For scrollbars, you'll need to provide a fixed width or height. So Please try adding a fixed width to the parents let's see.

made it work with the following inline
style={{width:"100px",overflow: "auto",whiteSpace: "nowrap"}}