How to stop the top of a tall SLDS modal from being clipped?

Question

I am using the SLDLS modal styles as documented and in general they work well. Below are two screen shots where the first has a small amount of lines (<p>Line</p> repeated) but the second has many more of those lines repeated which causes the top of the modal to be hidden.

The modal is created from a component that is being presented via a Lightning App Builder page.

The problem appears to be that while vertical scrolling is automatically added and the bottom edge of the modal is kept nicely above the utility bar, the top edge of the modal is positioned too high. The problem occurs using both standard navigation and console navigation (the latter used in the examples below).

Is there a clean way to fix this problem e.g. a small addition to the CSS?

OK example:

Not OK example:

Answer 1

Use the ui:scrollerWrapper to impose a maximum height and automatic scroll bars.

<aura:component>
    <ui:scrollerWrapper class="scrollerSize">
        <!--Scrollable content here -->
    </ui:scrollerWrapper>
</aura:component>

/** CSS **/
.THIS.scrollerSize {
    height: 300px;
}

Answer 2

The approach I have taken for now is to add this CSS to the component that contains the modal:

/* When modal height exceeds the screen height the top gets hidden without this */
.THIS .slds-modal__container {
    padding-top: 135px;
}