I'm working in the Lightning Design System and building components that need to have a flexible height. In other words, they should stretch to maximum height available on the page. Here's an example, where the left nav and main containers expand the available height of the page before reaching the footer.

I'm unable to find any specific SLDS classes that provide that kind of feature. Any ideas how this can be done?

enter image description here


You can leverage Vertical Stretch. By default, grid items extend vertically unless .slds-wrap is applied to your parent grid container or you have multiple rows. If you have need multiple rows that stretch the height of the parent grid container, you can apply the class .slds-grid--vertical-stretch. Note, to vertically align elements on a cross-axis of a .slds-grid, the elements need available vertical white space. This is usually achieved by having a height applied to the .slds-grid.

<div class="slds-grid slds-grid--vertical-stretch">
  <div>Content determines the width unless otherwise set</div>

enter image description here

  • 1
    This only seems to work if a parent element has a fixed height. Is it possible to do this so it fills the available space on the screen?
    – Robs
    Jul 20 '20 at 22:04

I think standard SLDS have better solution for this. try the below code.

<div class="slds-template__container" ></div>
  • this is deprecated. What replaced it? Oct 24 at 4:15
  • though it is still working, salesforce itself internally using it. Oct 29 at 9:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.