Have copied your examples - not working

[clarkk]

I have copied the examples from https://gromo.github.io/jquery.scrollbar/demo/basic.html but they are not working. What am I missing? I just copied it as it is

https://jsfiddle.net/kk1sy7ve/2/

Have two examples:

• content with scrollbar-outer has height:100px
• outer container has max-height:100px

<h1>Simple outer (content height)</h1>
<div class="scrollbar-outer" style="height:100px">
    <p>
        Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
        This example shows nested scrollbars functionality: nested scrollbar styles do not
        interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
        inside each other.
    </p>
    <p>
        Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
        This example shows nested scrollbars functionality: nested scrollbar styles do not
        interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
        inside each other.
    </p>
    <p>
        Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
        This example shows nested scrollbars functionality: nested scrollbar styles do not
        interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
        inside each other.
    </p>
</div>

<h1>Simple outer (container max-height)</h1>
<div style="max-height:100px">
    <div class="scrollbar-outer">
        <p>
            Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
            This example shows nested scrollbars functionality: nested scrollbar styles do not
            interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
            inside each other.
        </p>
        <p>
            Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
            This example shows nested scrollbars functionality: nested scrollbar styles do not
            interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
            inside each other.
        </p>
        <p>
            Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
            This example shows nested scrollbars functionality: nested scrollbar styles do not
            interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
            inside each other.
        </p>
    </div>
</div>

jQuery(document).ready(function(){
    jQuery('.scrollbar-outer').scrollbar();
});

[gromo]

1. Do not use inline styles to limit height, use classes and set height limit via CSS
2. Your inner container should have class with height:100%; to be set

[clarkk]

thanks :)

[clarkk]

Ok, I got the first one to work but can't make the second one to work with the outer container..

https://jsfiddle.net/kk1sy7ve/6/

.test-outer {
  max-height:100px;
}

.scrollbar_content {
    height:100%;
    overflow:auto;
}

<h1>Simple outer (content height)</h1>
<div class="test-outer">
<div class="scrollbar-outer scrollbar_content">
    <p>
        Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
        This example shows nested scrollbars functionality: nested scrollbar styles do not
        interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
        inside each other.
    </p>
    <p>
        Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
        This example shows nested scrollbars functionality: nested scrollbar styles do not
        interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
        inside each other.
    </p>
    <p>
        Simple outer scrollbar can be used as CSS base for custom outer scrollbars.
        This example shows nested scrollbars functionality: nested scrollbar styles do not
        interfere with parent scrollbar styles, i.e. different scrollbars can be safely used
        inside each other.
    </p>
</div>
</div>

[gromo]

Yep, you're right, the second one won't work this way. You have to set fixed height to outer container or apply max-height to scrollbar container.