lightning-layout stretches inner datatable

Question

I have the following code in a web component:

<lightning-accordion-section name="Products" label="Products">
                <lightning-layout>
                    <lightning-layout-item size="8" padding="around-medium">
                            <c-custom-datatable key-field="id"  
                                                data={generalDetailsLicenseItemsDisplay} 
                                                columns={generalDetailsColumns} 
                                                sorted-by={generalDetailsSortBy}
                                                sorted-direction={generalDetailsSortDirection}
                                                onsort={handleGeneralDetailsSortdata}
                                                onrowaction={handleRowAction} 
                                                class = "customDataTable"
                                                hide-checkbox-column>
                            </c-custom-datatable>
                    </lightning-layout-item>
                    <lightning-layout-item size="4" class="slds-border_left" padding="around-medium">
                            <article class="slds-card slds-card_boundary">
                                <div style="height: 300px; " class="slds-card__body slds-card__body_inner">
                                    <lightning-input type="date" name="input2" label="License Expiration Date" value="2017-09-07"></lightning-input>

                                    <lightning-input type="number" name="input2" label="Days" value="12345"></lightning-input>
                                </div>
                                <footer class="slds-card__footer">
                                    <lightning-button label="Apply" alternative-text="Filter" variant="brand" class="slds-m-left_xx-small"></lightning-button>
                                </footer>
                              </article>
                    </lightning-layout-item>
                </lightning-layout>
            </lightning-accordion-section>

When i put the datatable inside the lightning-layout-item tag, i receive the following:

[![enter image description here][1]][1]

The datatable is stretched to the bottom of screen. On the lightning-layout tag, i see that slds-grid is applied with Display: flex;. When i remove Display: flex; it looks better, without that grey area, but i don't know how to avoid it, and how to fix the size of the datatable.

Answer 1

This is because the vertical-align of layout is stretch by default. You need to make it start (or center/end) to remove the vertical stretching of datatable.

<lightning-layout vertical-align="start">

Created this playground link for you.