Don't require CSS height or max-height

Currently mCustomScrollbar() requires the container div to have “height” or “max-height” CSS attribute. That’s is not very cool in cases in which we don’t want to set such attributes (i.e. when using the new W3C FlexBox model with “flex-direction: column” in which the divs can fill the entire vertical space of the main box).

Why is “height” or “max-height” CSS attribute required? why not get the height via jQuery height() method?

[ERobishaw]

I’m having good success with 3.1.3 using flexbox with all browsers except Safari. With Safari, my container is set to:

flex: 1 1 100%;
max-width: 100%;
max-height: 100%;
box-sizing: border-box;
min-height:100%;

Which results in the .mCustomScrollBox height at 0 in Safari.

The style for this container is setting style=“max-height:280px” (for example) as calculated. This works for everyone but safari. For safari, it needs either min-height or height also set to this value (height:280px) for it to render correctly.

Here’s the fix:

                        /* css flexbox fix, detect/set max-height */
                        mCustomScrollBox.css("max-height","none");
                        if (mCustomScrollBox.height() !== $this.height()) {
                            mCustomScrollBox.css("max-height",$this.height());
                            **mCustomScrollBox.css("height",$this.height());**
                        }

[malihu]

I cannot see any scrollbar on the example.

In order to make the yellow box have a scrollbar you must set a max-height value on it and since you have fixed height values, you can set its max-height:125px;. In your example, you’ve set height values for everything but the yellow box, so you don’t need jQuery to set its height. 200px minus 25px minus 50px equals 125px. You can apply that in your css. You could also do this with percentages.

A scrollbar cannot work without a height/max-height (like in your example, where no scrollbar is present). This applies on any kind of scrollbar (browser, javascript, whatever…).

If there’s no height, how can an engine know when to stop expanding an overflow:auto element and apply a scrollbar?

Additionaly, The custom scrollbar plugin has the set_height option parameter, where you can set its value to pixels or percentage. For example:

$('.contentContainer').mCustomScrollbar({
    set_height: "80%"
});