IconTabBar with stretchcontentheight makes my header disappear in SAPUI5 - sapui5

Question

I have this issue where I want to have the scrollbar active only for the content of my IconTabBar, while keeping the header fixed. I read here in stackoverflow that I should put all the content inside a ScrollContainer, and then set the stretchContentHeight="true".
But this option kills my header.
this is my code
<mvc:View
controllerName="Quickstart.App"
displayBlock="true"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:tnt="sap.tnt"
height="100%">
<App id="app">
<Page id="intro" showHeader="false" enableScrolling="false">
<tnt:ToolHeader height="10rem">
<Image src="./images/image.png"/>
<Text text="title" wrapping="false" />
<ToolbarSpacer />
<Button text="Feedback" icon="sap-icon://feedback" type="Transparent" press="onPressFeedback"/>
</tnt:ToolHeader>
<IconTabBar
id="idIconTabBarNoIcons"
items="{/Sheet1}"
class="sapUiResponsiveContentPadding"
expandable="false"
backgroundDesign="Transparent"
applyContentPadding="false"
stretchContentHeight="true">
<items>
<IconTabFilter text="{category_title}" key="info">
<Toolbar class="toolbar_boarder" design="Transparent">
<ToolbarSpacer/>
<Button text="Sort" tooltip="Order Alphabetically" id="IdSortButton" width="70px" press="onPressSort" icon="sap-icon://alphabetical-order" type="Ghost"/>
<Button id="IdExpandButton" tooltip="Additional Information" text="Collapse" class="sapUiTinyMarginEnd" width="101px" press="onPressExpand" icon="sap-icon://collapse-all" type="Ghost"/>
</Toolbar>
<ScrollContainer id="Scroll" class="sapUIBody" height="100%" width="100%" horizontal="false" vertical="true">
<l:Grid containerQuery="true" content="{path:'tools', templateShareable:false}" id="gridId">
<Panel class="iconFilters" fieldGroupIds="idPanel" >
<HBox>
<!-- <core:Icon press="onPressToolIcon"
src="{tool_icon_url}" size="2rem" color="Default" class="" /> -->
<Image src="{tool_icon_url}" width="2.2rem" press="onPressToolImage"></Image>
<Link text="{tool_title}" wrapping="true" target="_blank" href="{tool_redirect_url}" class="sapUiTinyMargin title_header"/>
</HBox>
<!-- Control the size of the line before badges -->
<Toolbar height="6px" width="75%"></Toolbar>
<HBox items="{path:'badges', templateShareable:false}" height="1rem" justifyContent="End" class="drawline">
<core:Icon size="1rem" src="{badge_css_url}" tooltip="{badge_hover_text}" class="badgePadding" />
</HBox>
<VBox height="11rem">
<Label text="Use Cases" class="sapUiTinyTop" design="Bold"/>
<List
items="{path:'usecases', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<FormattedText htmlText="{item}" />
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox height="11rem">
<Label text="Strengths" class="sapUiSmallTop" design="Bold"/>
<List
items="{path:'strengths', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<Text
wrapping="true" text="{item}"/>
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox height="5rem" fieldGroupIds="hideShowElements" visible="true">
<Label text="Best Practices" class="sapUiSmallTop" design="Bold" fieldGroupIds="hideShowElements"/>
<List
items="{path:'best_practices', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{best_practices_name}"
target="_blank"
href="{best_practices_url}" />
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox class="" height="5rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Content Responsibility" class="sapUiSmallTop" fieldGroupIds="hideShowElements" design="Bold" visible="true"/>
<List
items="{path:'content_responsibility', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem>
<HBox class="listItems">
<Text text="• " class="items_circle" />
<Text
wrapping="true" text="{item}"/>
</HBox>
</CustomListItem>
</List>
</VBox>
<VBox class=" conf_move_down" height="3.5rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Confidentiality Level" design="Bold" fieldGroupIds="hideShowElements"/>
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{confidentiality_level}"
target="_blank"
href="{confidentiality_level_url}" />
</HBox>
</VBox>
<VBox class=" expandClassTrue" height="6rem" visible="true" fieldGroupIds="hideShowElements">
<Label text="Support" design="Bold" fieldGroupIds="hideShowElements"/>
<List fieldGroupIds="hideShowElements"
items="{path:'support', templateShareable:false}"
includeItemInSelection="true">
<CustomListItem class="listItems">
<HBox class="listItems">
<Text text="• " class="items_circle2" />
<Link wrapping="true"
text="{support_name}"
target="_blank"
href="{support_url}" />
</HBox>
</CustomListItem>
</List>
</VBox>
</Panel>
</l:Grid>
</ScrollContainer>
</IconTabFilter>
</items>
</IconTabBar>
</Page>
</App>
</mvc:View>
When I use "False" for stretchcontentheight, this is the top of my page:
When I use "true", the header is gone.
Does anyone know how to solve this?
Thank you very much for reading and helping

Answer 1

I fixed my problem with a workaround using custom headers.