Add support for flexbox parents (fix Grsmto#473)

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.

Author: Gittenburg

packages/simplebar/src/simplebar.js

@@ -64,6 +64,11 @@ export default class SimpleBar {
 
     SimpleBar.getRtlHelpers = memoize(SimpleBar.getRtlHelpers);
 
+    const parentDisplay = getElementWindow(this.el).getComputedStyle(this.el.parentElement).display;
+    if (parentDisplay == 'flex' || parentDisplay == 'inline-flex') {
+      this.parentIsFlex = true;
+      this.el.style.overflow = 'hidden';
+    }
     this.init();
   }
 
@@ -361,11 +366,13 @@ export default class SimpleBar {
     this.axis.y.isOverflowing =
       contentElScrollHeight > contentWrapperElOffsetHeight;
 
-    // Set isOverflowing to false if user explicitely set hidden overflow
-    this.axis.x.isOverflowing =
-      elOverflowX === 'hidden' ? false : this.axis.x.isOverflowing;
-    this.axis.y.isOverflowing =
-      elOverflowY === 'hidden' ? false : this.axis.y.isOverflowing;
+    if (!this.parentIsFlex){
+      // Set isOverflowing to false if user explicitely set hidden overflow
+      this.axis.x.isOverflowing =
+        elOverflowX === 'hidden' ? false : this.axis.x.isOverflowing;
+      this.axis.y.isOverflowing =
+        elOverflowY === 'hidden' ? false : this.axis.y.isOverflowing;
+    }
 
     this.axis.x.forceVisible =
       this.options.forceVisible === 'x' || this.options.forceVisible === true;