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|
A workaround for you is to add a height to the flex-item:
overflow: auto;
height: 100%;
}
Most helpful comment
A workaround for you is to add a height to the flex-item:
flex-item {
overflow: auto;
height: 100%;
}