html - How to use height: auto property in css with JQuery custom content scroller when calling mCustomScrollbar() manually -

html - How to use height: auto property in css with JQuery custom content scroller when calling mCustomScrollbar() manually -

i trying utilize jquery custom scroll-bar script discussed here on jekyll powered github site. utilize scrolling code blocks in each page such each code block there horizontal or vertical (or both) scroll bars if there overflow. however, heights of different code blocks varies , plugin has work css property max-height: npx rather height: npx.

the problem if define max-height: npx without height: npx property (which dont want since want height auto/to vary content), entire code block collapses such scrollbars disappear altogether, along content.

here minimal reproducible illustration on jsfiddle max-height defined. setting height: npx makes content , scrollbars work okay: except not option: in case, height must auto.

i have looked @ authors illustration on using plugin max-height in provided archive in max-height.html example, mcustomscrollbar not called manually doing in my example cant "copy-paste" example.

what missing here? help much appreciated! many thanks!

you can seek jquery scrollbar. i've updated jsfiddle illustration - here. included styles , scrollbar github.io , apply container when document ready.

do not forget add together class scrollbar - scrollbar customizable through css classes. list of ready-to-use classes available on basic demo page. in illustration i've used class scrollbar-light background-color modification:

.scrollbar-light > .scroll-element { background-color: yellow; }

jquery html css custom-scrolling mscrollbar