Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flexbox item double sidebar #473

Open
jpintar opened this issue May 16, 2020 · 1 comment · May be fixed by #488
Open

Flexbox item double sidebar #473

jpintar opened this issue May 16, 2020 · 1 comment · May be fixed by #488
Labels
bug

Comments

@jpintar
Copy link

jpintar commented May 16, 2020 •
edited
Loading

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
Gittenburg added a commit to Gittenburg/simplebar that referenced this issue Jun 26, 2020
@Gittenburg
Add support for flexbox parents (fix Grsmto#473)
5d6b0f9 
Previously attempting to use SimpleBar in a parent with "display: flex"
resulted in no scrolling at all. If you specified "overflow: scroll"
on the SimpleBar element you got two scroll bars being displayed
the SimpleBar one and the native one.

The fix is to simply add "overflow: hidden" on the SimpleBar element
(otherwise the track offsetHeigth is equal to our scrollHeight).

Since we currently respect overflow settings (by setting the respective
scrollbar to a size of 0), we also need to skip that check for flex parents.
@Gittenburg Gittenburg linked a pull request Jun 26, 2020 that will close this issue
Open
@Grsmto Grsmto added the bug label Jul 3, 2020
@frakay100
Copy link

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

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

Gittenburg added a commit to Gittenburg/simplebar that referenced this issue Jul 6, 2020
@Gittenburg
Prevent double scrollbars for flexbox parents
e5748e1 
Previously attempting to use SimpleBar in a parent with "display: flex"
without specifying a height or "overflow: hidden" on the host element,
resulted in two scroll bars being displayed SimpleBar and the native one.

Fixes Grsmto#473.
Gittenburg added a commit to Gittenburg/simplebar that referenced this issue Jul 6, 2020
@Gittenburg
Prevent double scrollbars for flexbox parents
98721b9 
Previously attempting to use SimpleBar in a parent with "display: flex"
without specifying a height or "overflow: hidden" on the host element,
resulted in two scroll bars being displayed SimpleBar and the native one.

Fixes Grsmto#473.
Gittenburg added a commit to Gittenburg/simplebar that referenced this issue Jul 6, 2020
@Gittenburg
Prevent double scrollbars for flexbox parents
e8af63a 
Previously attempting to use SimpleBar in a parent with "display: flex"
without specifying a height or "overflow: hidden" on the host element,
resulted in two scroll bars being displayed SimpleBar and the native one.

Fixes Grsmto#473.
Gittenburg added a commit to Gittenburg/simplebar that referenced this issue Jul 6, 2020
@Gittenburg
Prevent double scrollbars for flexbox parents
c94333a 
Previously attempting to use SimpleBar in a parent with "display: flex"
without specifying a height or "overflow: hidden" on the host element,
resulted in two scroll bars being displayed SimpleBar and the native one.

Fixes Grsmto#473.
@ivenuss ivenuss mentioned this issue Dec 4, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Prevent double scrollbars for flexbox parents Gittenburg/simplebar
3 participants
@Grsmto @frakay100 @jpintar