How to create with SLDS grid system and lightning:cards some "full-screen" height cols and inner scrolls on overflow

Question

First of all, I'm open to suggestions on how to make the title more descriptive ;)

What I'm trying to achieve is to have a "full-screen layout" using the slds grid system but I don't know all the classes and tricks.

My desired mockup would be something like...

I got some code that looks nice when its "empty" and looks like...

But as soon as one of the panels has a long body... it starts overflowing without scrollbar.

What I would like instead is to have an inner scrollbar inside the lightning:card body so the layout is kept regardless of the content of the body of the cards.

My code so far is as follows...

Style

article.slds-grid_vertical-stretch{
    height: 100%;
}

component

<div class="slds-grid slds-wrap " style="height: 100%;">
    <div class="slds-col slds-size_1-of-1 " style="height:100px;">
        <lightning:card  class="slds-grid_vertical-stretch"> Customer xxx<br/>Amount of ...
        </lightning:card>
    </div>
    <div class="slds-col slds-size_7-of-12 slds-p-top--medium slds-p-right--medium" style="height:calc(100% - 100px);">

        <div class="slds-col slds-size_1-of_1 " style="height:calc(100% - 150px);">
            <lightning:card title="Rental List" class="slds-grid_vertical-stretch">
            </lightning:card>
        </div>
        <div class="slds-col slds-size_1-of_1 slds-p-top--medium" style="height: 150px;">
            <lightning:card title="Totals" class="slds-grid_vertical-stretch">
            </lightning:card>
        </div>


    </div>
    <div class="slds-col slds-size_5-of-12 slds-p-top--medium" style="height:calc(100% - 100px);">
        <div class="slds-col slds-size_1-of-1" style="height: 50%;">
            <lightning:card title="Products Quality A" class="slds-grid_vertical-stretch">
                <span class="slds-scrollable_y" >
                    Hello 1 <br/>Hello 2 <br/>Hello 3 <br/>Hello 4 <br/>Hello 5 <br/>Hello 6 <br/>Hello 7 <br/>Hello 8 <br/>Hello 9 <br/>Hello 10<br/>
                    Hello 11<br/>Hello 12<br/>Hello 13<br/>Hello 14<br/>Hello 15<br/>Hello 16<br/>Hello 17<br/>Hello 18<br/>Hello 19<br/>Hello 20<br/>
                    Hello 21<br/>Hello 22<br/>Hello 23<br/>Hello 24<br/>Hello 25<br/>Hello 26<br/>Hello 27<br/>Hello 28<br/>Hello 29<br/>Hello 30<br/>
                </span>
            </lightning:card>
        </div>
        <div class="slds-col slds-size_1-of_1 slds-p-top--medium" style="height: 50%;">
            <lightning:card title="Products Quality B" class="slds-grid_vertical-stretch">
            </lightning:card>
        </div>
    </div>
</div>

Any ideas?

Answer 1

Using straight SLDS, use the scrollable style. In Lightning Components, you can choose to use ui:scrollerWrapper instead.

---

<div class="slds-scrollable" style="height: 5rem; width: 24rem;">
<p>Scrollable Content Here</p>
<div class="slds-text-longform" style="width: 150%;">
<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
<p>Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.</p>
</div>
</div>

---

ui:scrollerWrapper

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

---

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

Answer 2

I recommend adding a custom class to each of the innermost divs, and define the css style for that custom class to overflow-y: auto;

Answer 3

As sdfcfox says, you can use the ui:scrollerWrapper to add the required scrollbars, and if you want to set a dynamic height, for example to 80%, you can set the CSS height attribute with a "vh" suffix:

/** CSS **/
.THIS.scrollerSize {
    height: 80vh;
}