Dynamic height for material ui tab containers

If you set the height based on the given element's current visibility you will be able to resolve this issue.

Example

.react-swipeable-view-container > div[aria-hidden="false"] {
    height: 100%;
}

.react-swipeable-view-container > div[aria-hidden="true"] {
    height: 0;
}

Note: this solution could be improved by using a better selector, something more descriptive like a class name. I suppose it's subjective though, using an attribute selector is not technically wrong and actually more specific than just a class.

Demonstration: https://www.webpackbin.com/bins/-Ky0z8h7PsdTYOddK3LG

animateHeight will animate height on tab change. if all tabs have different height it will show height accordingly.
Example:

<SwipeableViews
  animateHeight // it will animate height on tab change
>
    <div>{'slide 1'}</div>
    <div>{'slide 2'}</div>
    <div>{'slide 3'}</div>
</SwipeableViews>

Happy Coding ...!