Simplebar: Flexbox item double sidebar

Created on 16 May 2020  路  1Comment  路  Source: Grsmto/simplebar

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|

bug

Most helpful comment

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

flex-item {

overflow: auto;
height: 100%;
}

>All comments

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

flex-item {

overflow: auto;
height: 100%;
}

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Aleksandr2015 picture Aleksandr2015  路  6Comments

andrey-evstigneev picture andrey-evstigneev  路  3Comments

Blackleones picture Blackleones  路  3Comments

FuturFuturFutur picture FuturFuturFutur  路  4Comments

adsim picture adsim  路  5Comments