SAPUI5 - Responsive sap.m.Table - header

Question

I created a sap.m.table with its header headerToolbar.
In the header, I put the title and two SelectList separated by a ToolbarSpacer.
The problem is that when the screen size is small the elements on the headerToolbar don't go back to the next line and are truncated ...
On a large screen:
On a small screen:
I want the header to be responsive, that is the elements should go to the next line if there is no sufficient space.
Here is the code:
<headerToolbar height="auto">
<Toolbar height="auto">
<content>
<Title id="tableHeader" text="..."/>
<ToolbarSpacer />
<Label text="..." lableFor="sl1"/>
<SelectList id="sl1"
enabled="true">
<core:Item key="..." text="..." />
<core:Item key="..." text="..." />
</SelectList>
<ToolbarSpacer />
<Label text="..." lableFor="sl2"/>
<SelectList id="sl2"
enabled="true">
<core:Item key="..." text="..." />
<core:Item key="..." text="..." />
</SelectList>
<ToolbarSpacer />
</content>
</Toolbar>
</headerToolbar>

Answer 1

Why you don't use OverflowToolbar instead of Toolbar?
Is the official responsive Toolbar
https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.OverflowToolbarFooter/preview
If you don't like it and want this "pop-in" behaviour you have described, I guess you can put a FlexBox inside your Toolbar and set the direction property depending on the "device" model.
Using expression binding will be something like this:
new sap.m.FlexBox({
direction: "{= ${device>/isPhone} ? 'Column' : 'Row' }",
items: [
//Your content goes here
]
})
More here: https://sapui5.hana.ondemand.com/#docs/guide/69a8e469fbde46e7b8916250080effbd.html

Answer 2

You can enable horizontal table scrolling in the css:
.enableTableScrolling {
overflow-x: scroll;
}
After that table will not be truncated.