Prevent double scrollbars for flexbox parents

[Gittenburg]

Fixes #473.

[Grsmto]

Hi! Thanks very much for your contribution.

Could you hold on with this quick fix until the next major release? Merging this PR in the current state would probably generate unexpected behaviour in other scenarios, since as you noticed applying overflow: hidden would break the overflow settings detection (what if I want a flex layout with X axis scrolling only?). So I would rather include the fix for this on the next major release (as there will be breaking changes anyways...).

Also applying height: 100% on the host element should also workaround this issue, (same way as overflow: hidden).

Quick note but I think there is something wrong with your "broken" example: if you remove simplebar from that example, it will do exactly the same. It's normal CSS behaviour, the child of the flex container is overflowing its parent, so there isn't any scrollbar unless you define overflow: auto.

Thanks!

[Gittenburg]

Hi, thanks for the detailed reply!

I couldn't get height: 100% to work previously but I must have been doing something wrong as it works flawlessly.

Quick note but I think there is something wrong with your "broken" example: if you remove simplebar from that example, it will do exactly the same. It's normal CSS behaviour, the child of the flex container is overflowing its parent, so there isn't any scrollbar unless you define overflow: auto.

You are correct that if you remove simplebar from the example the behaviour doesn't change. Note however that Simplebar does not follow normal CSS behaviour: when you specify a height on the host element it makes the content scrollable, even if you do not specify overflow: auto.

I updated this PR to just be a one-line CSS addition: setting max-height: 100% for [data-simplebar]. That fixes the double scrollbar bug #473 and should not break existing uses (you can still override the height or the overflow behaviour).

[andrskr]

@Grsmto I may not understand something but in order for flexbox styles to work you need to add display: flex; here https://github.com/Grsmto/simplebar/blob/c94333a8ce63df2e2c9f2ac44e96a758f1acd155/packages/simplebar/src/simplebar.css#L3 This helped me solve the problem with double scrollbars (in my case, just all by adding my own className with overflow: auto; to the SimpleBar React Component and apply overflow: hidden; to parent element)