Adding a scrollbar to a firefox extension's sidebar

Question

I'm trying to add a scrollbar to a firefox extension so that it displays when the window is too small.

I'm having issues with having the scrollbar span the entire range from top to bottom of the sidebar and only having it displayed when the window is too small.

One extension that has the functionality I would like is the sage extension, however searching through the CSS and XUL, I'm unable to figure out how it works.

XUL File

  <vbox flex="1" id="main" align="center" pack="end" maxwidth="300">
    <spacer height="10"/>
    <image id="logo" maxwidth="300"/>
    <spacer height="20"/>
    <vbox id="button" flex="1">
      <button id="a-button" label=""/>
      <spacer height="20"/>
      <listbox id="listbox1" width="300" maxwidth="300" rows="6">
        <listhead id="list-header">
          <listheader label=""/>
        </listhead>
    </listbox>
      <spacer height="20"/>
    </vbox>
    <tabbox id="details-box" maxwidth="300">
      <tabs id="tabs">
        <tab id=a"-label" label="" style="text-align: center;"/>
      </tabs>
      <tabpanels>
        <vbox>
            <button id="another-button" label="" />
        </vbox>
      </tabpanels>
    </tabbox>
    <spacer height="20"/>
    <vbox maxwidth="300">
        <description id="message" style="display: none;">
            <!-- updated with ajax -->
        <html:h1 id="header"/>
        <html:p id="body"/>
      </description>
    </vbox>
  <spacer flex="10"/>
  </vbox>
  <spacer flex="10"/>
</page>

Relevant CSS

/* Main */

{
    padding: 0;
    margin: 0;
}

#sidebar {
    background-color: #fff;
    font: 10pt "arial", "sans-serif";
    line-height: 11pt;
}

vbox#main {
    padding-left: 20px;
    padding-right: 20px;
    /* min-height: 600px; */
    min-width: 330px;
    overflow-x: hidden;
    overflow-y: auto;
}

How it currently looks

Desired effect in Sage Extension

Answer 1

The problem is that vbox#main was not the only child node of . I also had a panel in there which would popup based on some action.

By moving the panel inside of vbox#main, vbox#main would span the entire space of the sidebar.