Please add 'overflow:hidden' style to the 'main-body'.
<div class="main-body f-full f-column" [b]style="overflow:hidden;"[/b]>
<Tabs class="f-full">
<TabPanel title="DataGrid" bodyCls="f-column">
<DataGrid class="f-full" :data="data">
<GridColumn field="itemid" title="Item ID"></GridColumn>
<GridColumn field="name" title="Name"></GridColumn>
<GridColumn field="listprice" title="List Price" align="right"></GridColumn>
<GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
<GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
<GridColumn field="status" title="Status" align="center"></GridColumn>
</DataGrid>
</TabPanel>
</Tabs>
</div>