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

[CristianDDias]

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 AnalyticalTable 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

[MarcusNotheis]

Hi @CristianDDias
thanks for submitting this issue.
As the TabContainer and the Tab are UI5 Web Components, I forwarded this issue to our colleagues: SAP/ui5-webcomponents#889

[MarcusNotheis]

Hi @CristianDDias, should be fixed the latest dev version of the library