How could you make TabBox to fill all available space?

Does anybody know how I can make TabBox to fill all available space? I tried this:

<tabbox id="MyTabBox" flex="1">
  <tabs>  
    <tab label="Income" />
    <tab label="Taxes" />
  </tabs>   
  <tabpanels flex="1">
    <tabpanel>
      <button label="Calculate" flex="0"/>
    </tabpanel>  
    <tabpanel> 
    </tabpanel>  
  </tabpanels>
</tabbox>

The TabBox looks fine, but this makes the Button to fill all the height of the first TabPanel, despite its flex attribute. If I limit the height of the Button, that also makes the TabBox kind of short, not the way I need.

Thank you.

Update: The window code now looks like this:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/" ?>
<?xml-stylesheet type="text/css" href="chrome://MyExtension/skin/MyExtension.css" ?>

<!DOCTYPE window SYSTEM "chrome://MyExtension/locale/translations.dtd">

<window id="MyExtension-MainWindow"
  title="My Extension"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  xmlns:html="http://www.w3.org/1999/xhtml">

<html:li开发者_运维技巧nk rel="icon" href="chrome://MyExtension/skin/MyExtensionFavIcon.png"/>

<tabbox id="MyTabBox" flex="1">
  <tabs>  
    <tab label="Income" />
    <tab label="Taxes" />
  </tabs>   
  <tabpanels flex="1">
    <tabpanel align="start">
      <button label="Calculate" flex="0"/>
    </tabpanel>  
    <tabpanel> 
    </tabpanel>  
  </tabpanels>
</tabbox>

</window>

FavIcon is Ok, Button is Ok, TabBox is shrunk, which sucks :-(

Try adding align="center" to the button tabpanel (Adding align to an element affects that element's children, not the element itself). See here -- IIRC stretch is the default.