In this article we will go over how to make the tabs in a Tabs design element full height and each tab will have equal height.

Prerequisites

1. You have inserted a Tabs element in your page

2. You have set its Tabs Location option to Left or Right. Your current tabs element should look like this: 

Step 1: Add class name to your Tabs design element

• Open the Tabs element, go to the Custom CSS tab and add the class name - full-height-tabs - in the Class field:

• Make sure you click Update after adding the class name.

Step 2: Add some custom CSS to the parent Row

• Open your the settings for the Row containing your Tabs element. 

• Copy the CSS code below and paste it in the Custom CSS text area in the Custom CSS tab.

.shortpoint-tabs {
  height: 100%;

  .full-height-tabs {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .sp-type-tab {
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      > div {
        flex-grow: 1;
        width: 100%;
      }
    }
  }
}

• Click Update and Save/Publish the page. Refresh the page and the tabs should now have equal heights that together fills the height of the Tabs element

Result

Here is how the result will look: