Список компонентов молнии внутри компонента

Question

Я пытаюсь создать прокручиваемый список компонентов внутри другого компонента. Я использую вид карты, чтобы содержать мою информацию. Когда я пробую следующий код, я получаю странный результат с прокручиваемым представлением.

<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>

В результате я получаю вот такую ​​полосу прокрутки на ничейной земле.

Я искал это там, где это невидимый свиток или, по крайней мере, слева без всего этого отступа.

Answer 1

</lightning:card>

Используйте молнии.

для вашей ссылки https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example

Answer 2

Ваш div использует всю доступную ширину, в то время как ширина ваших карт (c: ContentCard) как-то ограничена. Вот почему у вас есть разрыв между вашими картами и полосой прокрутки. Я бы порекомендовал вам: 1) Снимите ограничение ширины с компонента ContentCard и; 2) Передать вышестоящему компоненту ответственность за организацию распределения компонентов на странице. Вы можете управлять структурой компонентов с помощью классов молний slds-grid и slds-col.