TabContainer / Tab: It's not possible to use CSS height:100% inside a Tab

[MarcusNotheis]

We received the following issue in UI5 Web Components for React:

Describe the bug
It's not possible to use CSS height: 100% inside a Tab component. I want to use the TabContainer and Tab components inside a Panel component that I created. This Panel component is a div with 400px height. I set the CSS height of the TabContainer component to 100%. However, when I set the CSS height of the Tab component to 100%, it doesn't work, it only works when I set the CSS height to a pixel value (not a percentage value).

To Reproduce
Access the CodeSandbox link.
In the initial state of this code, the TabContainer and Tab components have height: 100% and the TabContainer component has overflow: auto. In this case, the panel is 400px height, which is correct, but when you scroll down, the tab header isn't fixed at the top of the panel. When you click on the Toggle style button, the Table component gets a style props with height: 150px, which fixes the tab header at the top of the panel, but the panel isn't 400px height, because I'm using height: 150px.

Expected behavior
I expect that when I set the CSS height: 100% inside a Tab component, it should fill all the available space inside content area of the TabContainer component.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: 77

Original Issue:
SAP/ui5-webcomponents-react#202

I modified to code sandbox from the original issue to use only proxied UI5 Web Components.

[mehdijouan]

I was going to open the very same issue, but with a Vue project!