Dfyjkt

I'm trying to create a scrollable list of components inside another component. I'm using a card view to contain my info. When I try the following code, I get a weird result with the scrollable view.

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="ContentListController">

 <aura:handler name="init" value="!this" action="!c.doInit"/>

 <!-- Global decleration for the Content Id selected -->
 <aura:attribute name="ContenList" type="Content__c"/>

 <div style="max-height: 400px;overflow-y: auto;">
 <aura:iteration items="!v.ContenList" var="store">
 <c:ContentCard content="!store" duration="1" />
 </aura:iteration>
 </div>

</aura:component>

The result I get is this where the scroll bar is all the way off in no-man's land.

I was looking for this where its an invisible scroll or at least on the left without all that padding.

Your div is taking all available width while your cards (c:ContentCard) are having their widths limited somehow. That's the reason why you have the gap between your cards and the scroll bar.
I would recommend you to:
1) Remove the width limit from the ContentCard component and;
2) Delegate to a higher component the responsibility to organize the distribution of components on the page. You can control the structure of components with slds-grid and slds-col lightning classes.

</lightning:card>

Use the Lightning cads.

For Your Refrence
https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example