I'm working on an XHTML dialog (well, XHTML/XUL really). In my dialog, I have:

My focus in this question is on the tree element. I want it to have certain initial dimensions - a width and a height - due to which the containing dialog will have certain dimensions; but - I also want it to shrink and grow as I resize my dialog window, horizontally and vertically.

Focusing on the vertical aspect for a moment, I notice the following effects of choices of styles:

• style="min-height: 500px; flex: auto"
  gives me the initial dimension I want, and growth, but no shrinking below 500. Adding resize: vertical doesn't help.
• style="flex: auto"
  gives me growth and shrinkage, but - without the initial height I want.
• style="height: 500px; flex: auto"
  behaves exactly like with min-height above: gives me the initial dimension I want, and growth, but no shrinking below 500. Adding resize: vertical doesn't help.

So, not only do I not know which combination of CSS properties to set to which values, but I'm also confused by the effects, and the lack of effects, of different properties. I am also not sure how the styling of the containing elements affects things.

Notes:

• You can see the actual dialog's source here.
• If there are other important properties which have bearing on this problem, please mention them.
• Since it's actually XHTML/XUL, there are a bunch of stylesheets I include with impact on the tree. I don't think they should impact these "external" aspects of it, but I might also be wrong.