I have a form layout with two panels (green and orange) that both resize depending on their contents.  They are both inside a containing panel (yellow).  This is how it looks in design view:

You can see that in design view, the green panel is taller, and is setting the top and bottom height of the yellow panel.

However, when actually viewing the form, the orange panel may be taller.  In this case, the yellow panel is ignoring the height of the orange panel and setting the height of the yellow panel based only on the green panel.  As a result, the orange panel is cut off.  The best I’ve been able to do so far is add a scroll bar, but this isn’t ideal.

I would like the yellow panel’s height to be set based on the height of the green panel or orange panel, whichever is taller.  Is there any way to accomplish this?

(I started looking into JavaScript to manually set the height, but it’s not returning correct heights until some point after the page loads.  I haven’t yet found any JavaScript event that would indicate everything is done sizing.  Anyway, I would hope JavaScript wouldn’t be necessary for this layout scenario.)