Dynamic height content

[romanlex]

How I can use react-custom-scrollbars inside my modal what stretch with content? or inside sidebar? Example my modal has dynamic height and width or my sidebar has dynamic height When I'm trying insert scrollable component to another component with dynamic height I have 0px height because content inside react-custom-scrollbars has absolute position Maybe default behavior is stretch height to scrollable height and to limit the height from above component?

[couch4]

I have this problem every time I implement it!

Also for content that changes on the fly, it doesn't update - only like onResize...

[zinozzz]

@romanlex may be just stretch it with css? Make the paret element display:flex; and set the flex-grow: 1; for scrollbars wrapper.

@couch4 your content chaged with non-react code? you can try to use react-scrollbars-custom it is very similar to this component but has content sizes tracker, and in performs an update when sizes changed.

[pollen8]

I would wrap the component inside the AutoSizer component from react-virtualized. https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md

[DeRoPega]

@pollen8 can you give an example, please?

[pollen8]

import React from 'react';
import { Component } from 'react';
import { Scrollbars } from 'react-custom-scrollbars';
import { AutoSizer } from 'react-virtualized';

class Example extends Component {

  render() {
    const { data, selected } = this.props;
    return <div style={{ width: '100%' }}>
    <AutoSizer>
            {({ width, height }) => {
              return (
                <Scrollbars
                  style={{ width, height }}
                >
                  this is your content
                </Scrollbars>
              );
            }
            }
          </AutoSizer>
      }
    </div>;
  }
}

export default Example;

[sobelmanus]

Notice 2 different issues are addressed here:

• Setting the <Scrollbars> height -> addressed by @pollen8
• Tracking changes in the view's content size (e.g. elements add / removed) -> addressed by @zinozzz

[prabuw]

In case, anyone with the same problem arrives here, I created a codesandbox based on @pollen8 comments that demonstrates a solution.