I'm working on my first "real" lightning component, trying to extend what I've learned through a couple Trailhead trails and other Lightning component examples to my own real world component, but I can't figure why my inner component extends beyond the border of my outer component.

My scenario is this, I have a custom object with one or many contacts related to it.  I'm creating a record page component to show Activities related to the contacts who are related to my custom object record. I have an Apex class returning the activity records and my lightning component is showing those records.

The problem occurs with long Subject descriptions, despite my attemp to use slds-truncate.  How do I keep my inner component from extending beyond the border of my outer component?

Here's what I see:


Here's my outer component (tasksRelatedToFundList):

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="getActivitiesRelatedToFund" >
    <!-- Handle component initialization in a client-side controller -->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <!-- Dynamically load the list of tasks -->
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="tasks" type="Task[]" />
    <aura:attribute name="taskList" type="Task[]" />
    <aura:attribute name="totalTasks" type="Integer" />
    
    <!-- Page header with a counter that displays total number of tasks -->
    <div class="slds-page-header slds-page-header--object-home">
        <lightning:layout >
            <lightning:layoutItem >
                <lightning:icon iconName="standard:task" />
            </lightning:layoutItem>
            <lightning:layoutItem class="slds-m-left--small">
                <p class="slds-text-title--caps slds-line-height--reset">Activities</p>
                <h1 class="slds-page-header__title slds-p-right--x-small">Related Activities</h1>
            </lightning:layoutItem>
        </lightning:layout>
        
        <lightning:layout >
            <lightning:layoutItem >
                <p class="slds-text-body--small">{!v.totalTasks} Activities</p>
            </lightning:layoutItem>
        </lightning:layout>
        
        <!-- BOXED AREA -->
        <fieldset class="slds-box slds-theme--default slds-container--small">
            <!-- Body with list of tasks -->
            <lightning:layout >
                <lightning:layoutItem padding="horizontal-small" >
                    <!-- Iterate over the list of tasks and display them -->
                    <aura:iteration var="task" items="{!v.tasks}">
                        <c:tasksRelatedToFund task="{!task}"/>
                    </aura:iteration>
                </lightning:layoutItem>
            </lightning:layout>    
        </fieldset>
    </div>
</aura:component>

Here's my inner component (tasksRelatedToFund):

<aura:component implements="flexipage:availableForRecordHome">
    <aura:attribute name="task" type="Task" />
    
    <span class="slds-assistive-text">Email</span>
    <div class="slds-media">
        <div class="slds-media__body">
            <div class="slds-media slds-media--timeline slds-timeline__media--call">
                <div class="slds-media__figure slds-timeline__icon">
                    <div class="slds-icon_container">
                        <lightning:icon iconName="standard:email" size="x-small" alternativeText="email"/>  
                    </div>
                </div>
                <div class="slds-media__body">
                    <p class="slds-truncate" title="{!v.task.Subject}"><a onclick="{!c.goToRecord}">{!v.task.Subject}</a></p>
                    <p class="slds-p-horizontal--none"> <ui:outputDate value="{!v.task.ActivityDate}"/> </p>
                    <p class="slds-truncate">{!v.task.Status}</p>
                    <ul class="slds-list--horizontal slds-wrap">
                        <li class="slds-m-right_large">             
                            <ui:inputTextArea aura:id="comments" value="{!v.task.Description}" rows="5" cols="65" disabled="true" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</aura:component>