4

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

4

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>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

enter image description here

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.