I have a window has a vbox layout and includes two basic sections within. The top section doesn't have a flex, nor does it have a height defined since it contains an expandable fieldset. The fieldset needs to have the ability to expand and contract, affecting the height of the top section. The bottom section contains a flex of 1.

Basic Layout
ExtJS-HTML-Editor-Error-01.jpg
(The top section contains the field elements, surrounded by the blue background. The bottom section contains the HTML Editor.)

When I expand the fieldset in the top section, I expect the behavior of the bottom section to contract to make room for the growing top section, and yet fill in the remaining space at the bottom.

Expected Behavior
ExtJS-HTML-Editor-Error-2.jpg

However, when I expand the top section, the bottom section stays rigid, and elements of the top section that contain a fairly high z-index value show above the bottom section.

Actual Behavior
ExtJS-HTML-Editor-Error-3.jpg

Switching from a vbox layout to an alternate layout and defining the height of the bottom section also produces errors, as the expansion of the fieldset in the top section results in the bottom section being shoved (or slid) down (covering the window footer bar) rather than compressing.

Any suggestions for how to get the results I'm looking for?