React-custom-scrollbars: AutoHeight with unknown maxHeight?

[TheOpti]

Right now autoHeightMin, autoHeightMax take parameter of type number, which means number of pixels. How can I pass something like 'calc(100vh - 120px)' as my max height in scroll container?

Is it possible right now?

[Dmitry-N-Medvedev]

Not 100% sure, but it might be as folloing:

autoHeightMin={`calc(100vh - 120px)`}

[KyleAMathews]

I can confirm @Dmitry-N-Medvedev's solution works. Would be good to add to docs.

[sebhewelt]

Yeah, it works, but what if I would like to have the height to be 100% of the container?

• Setting it ` autoHeightMin={100%} , makes it about 200px high,
  
  
  
  • setting it autoHeightMin={calc(100vh)} disables scroll events, because height than, is indeed 100vh, not fitting the container.
  
  

[stevenmusumeche]

same problem here, i'd like it to be 100% height of it's container but nothing that I use works

[sag1v]

well i was hopping there was a way to set a real auto height that fit to the container or the first positioned relative parent. No luck so far.

[Hongbo-Miao]

I found

<Scrollbars style={{ height: '100%' }}></Scrollbars>

does not work.

But

<Scrollbars autoHeight autoHeightMin="100%" autoHeightMax="100%"></Scrollbars>

works for me!

[drewlustro]

Also having this issue... unknown maxHeight 🤷‍♂️

[team-moonrise]

Had the opposite effect that @Hongbo-Miao had.
style={{ height: '100%' }}

Worked great for me, where autoHeight, didn't work. Not quite sure why.

[rocketraman]

Hmm... style={{ height: '100%' }} worked for me as well... I'm not positive, but I think it really depends on how your parent container elements are defined. If your parent element defines it's height according to it's content, then you'll probably need to use autoHeight somehow. On the other hand, if your parent element defines it's height according to it's own space available, then style={{ height: '100%' }} will probably be the way to go.

In my case, I had a flexbox column container with setting auto. This was not working, apparently because of the auto flex-basis, which sets the initial height of the flex container to the size of its content -- the result was a 0 height scrollbar and content. Changing this to flex 1 1 0 (same as auto, but with a non-content based flex-basis) fixed the problem.

It's likely this just needs some documentation and some samples to know how to use it properly in various situations.

[ikorgik]

Good point @rocketraman!
style={{ height: '100%' }} works well to me when I set height: '100%' for the parent container.

[kiennguyen278]

i use
<Scrollbars autoHeight autoHeightMin={100} autoHeightMax="calc(80vh - 36px - 35px - 75px)"> content scroll </Scrollbars> it work for me

[vladi-strilets]

Hi everyone, I had the same issue.

As my parent has display: flex; height: 100% I use <Scrollbars style={{ flex: 1 }}>{children}</Scrollbars>

It works like a charm ;)