Problem laying out box using grid in XUL box does not take full space

Question

I'm trying to use xul to create a lay out like this:

• there is a box contains of a tree of data

• there is a box containing some buttons right below the previous box.

  I decided to use because otherwise the second box will be put right next to the first one (unless I use vbox). The problem is no matter what value I assign to flex, the box does not stretch out fully as I want. It only takes a small space at the left corner, not the whole window. Can someone help me with this please?

  My code is as follow:

      <!-- there're 2 rows, 1 for data, 1 for toolbar -->
      <rows>
          <!-- row 1 is for a tree of data -->
          <row flex="1">
              <vbox flex="1">
                  <tree id="MyTree" flex="1" height="1" width="1">
                      <treecols>
                          <treecol flex="1" label="Column1"/>
                          <treecol flex="1" label="Column2"/>                                
                      </treecols>
                      <treehead>
                          <treerow>
                              <treecell label="Name"/>
                              <treecell label="Address"/>                                   
                          </treerow>
                      </treehead>
                      <treechildren flex="1">
                          <treeitem container="true" open="true">
                              <treerow>
                                  <treecell class="treecell-indent" label="Group 1"/>
                              </treerow>
                              <treechildren>
                                  <treeitem>
                                      <treerow>
                                          <treecell class="treecell-indent" label="Item 1"/>
                                          <treecell label="xyz"/>
                                          <treecell label="adfjakdhk"/>
                                      </treerow>
                                  </treeitem>
                              </treechildren>
                          </treeitem>                                                     
                      </treechildren>
                  </tree>
              </vbox>
          </row>
          <!-- row 2 is for tool bar-->
          <row>
              <!--buttons are here-->
          </row>
      </rows>
  </grid>
  

Answer 1

My code is cut short at the beginning. Here is the beginning part of it.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?>
<window align="left" class="dialog" flex="1" xmlns:html="http://www.w3.org/TR/REC-html40"     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"&gt;
<groupbox flex="1">
    <caption label="List of something"/>
    <grid flex="1">
        <!-- I need only 1 column -->
        <columns>
            <column/>
        </columns>

Answer 2

Remove the align attribute from the window and add flex="1" to the column.