如何让 TabBox 填满所有可用空间？

Question

有谁知道我如何使 TabBox 填充所有可用空间？ 我尝试了这个：

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

TabBox 看起来不错，但这使得 Button 填充第一个 TabPanel 的所有高度，尽管它具有 flex 属性。 如果我限制 Button 的高度，这也会使 TabBox 有点短，而不是我需要的方式。

谢谢。

更新：窗口代码现在如下所示：

<?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:link 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 正常，按钮正常，TabBox 缩小，这很糟糕:-(

Answer 1

尝试将 align="center" 添加到 button 选项卡面板（将 align 添加到元素会影响该元素的子元素，而不是元素本身）。请参阅此处 - IIRC stretch 是默认值。