Why does the parent element have to be `display: flex` for v 2 to work?

[FontEndArt]

Question & Expected behavior It is expected to be used correctly without caring about the style of the parent element, and it is expected to have the same effect as sizeAutoCapable 1 in v 1 in various flex.

Now, my parent dom style must be display flex overlay scrollbars v 2 to work！

Examples Part looks like this, and And in some scenarios, the width or height of the viewport will be 0:

import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import 'overlayscrollbars/overlayscrollbars.css';

<div style={{
          width: '400px',
          maxHeight: '300px',
          background: 'black',
          color: 'white',
}}>
  <OverlayScrollbarsComponent>
    <p style={{ whiteSpace: 'nowrap', height: '100px' }}>我是第1个</p>
    <p style={{ whiteSpace: 'nowrap', height: '100px' }}>我是第2个</p>
    <p style={{ whiteSpace: 'nowrap', height: '100px' }}>我是第3个</p>
    <p style={{ whiteSpace: 'nowrap', height: '100px' }}>我是第4个</p>
    <p style={{ whiteSpace: 'nowrap', height: '100px' }}>我是第5个</p>
    <p style={{ whiteSpace: 'nowrap', height: '100px' }}>我是第6个</p>
    <p style={{ whiteSpace: 'nowrap', height: '100px' }}>我是第7个</p>
  </OverlayScrollbarsComponent>
</div>

Environment

• Used Operating System(s): Mac
• Used Browser(s) (with version): chrome 版本 112.0.5615.137（正式版本） (arm64)

Additional context Add any other context about the problem here.

[FontEndArt]

https://github.com/KingSora/OverlayScrollbars/issues/379 The description of the problem in v 1 seems to be somewhat helpful in understanding the problem at hand

[KingSora]

Good day @FontEndArt

So in v2 the target element is expected to be display:flex or display: inline-flex. Thats a new approach I'm using to get rid of measuring containers and some tricky size calculations. This wasn't possible in v1 because of the IE8 support.

Whats your exact problem with this fact?

[FontEndArt]

Internally the company is looking for a solution to replace the existing scrollbar plugin.

I used react-custom-scrollbars before, and it feels normal when I replace it with OverlayScrollbars v1.

Due to performance problems, I upgraded to v2, so now I encounter some problems that the original business scenarios are not compatible, or the height cannot be adapted, or the scroll bar cannot appear normally.

Because the containers of the original business scenario are not all flex, so I am very distressed how to solve it, or should I downgrade to v1?

Would really love to get your advice! Thanks!

[KingSora]

@FontEndArt The fact that the target element has display: flex shouldn't really change the behavior of anything around or inside of it. Since the children are wrapped in the viewport anyways (the viewport is display: block) it shouldn't affect them at all. You could just try to change the containers to be flex.

Can you show me an example of the problems you mentioned? Namely the "height cannot be adapted" and the "scroll bar cannot appear normally" problems.

[FontEndArt]

I'll try my best, because I can't reproduce the business scenario very well in the component library, it may take one to two days. Please wait patiently, thanks!

[mrold]

same issue

[KingSora]

@mrold Are you able to provide an example where display: flex is undesired and is affecting your layout?

[FontEndArt]

Difficult to reproduce after leaving company I'll temporarily close this question until I fully reproduce it in a demo and open it again!

[mrold]

@KingSora This won't scroll anyway unless the parent element adds the css style: display:flex

My tools: Vite and React

import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import 'overlayscrollbars/overlayscrollbars.css';

export default function App () {
  return (
    <div style={{width: 300, height: 500, margin: '50px auto', border: "solid 1px  #ccc", boxSizing: "border-box"}}>
      <OverlayScrollbarsComponent defer>
        <div style={{ height: 1000, background: 'green'}}>
          this is a long list
        </div>
      </OverlayScrollbarsComponent>
    </div>
  );
}

[szmarczak]

@KingSora One obvious example I'm having is when the scrollable element itself is flex-grow: 1 and there's a click listener attached that checks if user clicked on empty space (event.target === scrollable). This check never works under OverlayScrollbars.

[szmarczak]

I have opened #540.

[KingSora]

@szmarczak Your issue seems to be related to the fact that the plugin is wrapping your content in general and not to the display: flex of the host element.