Flexbox item double sidebar

[jpintar]

Describe the bug In a column flexbox with fixed height, a flex-item that shrinks to fit its parent will display both the SimpleBar and the native sidebar. The problem occurs in Chrome, Firefox, and Edge (other browsers not tested).

To Reproduce Set height of the parent column flexbox and assign SimpleBar to an oversized flex-item (see reproducible example below).

Expected behavior The native scrollbar should not be displayed on the flex-item.

Reproducible example https://jsfiddle.net/sp9wb8o4/

Additional context In Chrome, the issue can be circumvented by setting ::-webkit-scrollbar { display: none; } on the flex-item, but this doesn't help for Firefox of Edge.

Your environment

Software	Version(s)
SimpleBar	5.2.0
Browser	Chrome 81, Firefox 76, Edge 44
npm/Yarn
Operating System	Windows 10 v.1909

[frakay100]

A workaround for you is to add a height to the flex-item:

#flex-item { overflow: auto; height: 100%; }