Weird add/remove child layout behavior

Question

I'm trying to build an an app that allows the user to toggle
certain panels on and off. These panels are in Divider containers.
It seems that at startup, when I remove and add a panel flex
doesn't properly validate layout. For example 2 panels are added to
a VDivided container. I then call removeChild on the second panel
(at the bottom of the container), and the first panel then properly
occupies all the visible space. When I add the second panel back,
it is re-added but has not retained its original size and is
instead compressed at the bottom. If I then remove the top panel
and add it again, then remove the bottom panel and add it,
everything works as I expect. It's almost like their is a one-time
initialization not occurring somewhere. Here is the code sample I
am using to demonstrate the problem:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" width="1000" height="800">
<mx:VBox height="100%" top="0" left="0" right="0">
<mx:ApplicationControlBar x="0" y="0" width="100%"
height="58">
<mx:CheckBox label="Panel 1" id="panel1CheckBox"
selected="true" click="modifyViewPanel1()"/>
<mx:CheckBox label="Panel 2" id="panel2CheckBox"
selected="true" click="modifyViewPanel2()"/>
</mx:ApplicationControlBar>
<mx:VDividedBox x="0" y="0" width="100%" height="90%"
id="vDivideBox">
<mx:Panel width="100%" height="50%" layout="vertical"
title="Panel 1" id="panel1">
</mx:Panel>
<mx:Panel width="100%" height="50%" layout="vertical"
id="panel2" title="Panel 2">
</mx:Panel>
</mx:VDividedBox>
</mx:VBox>
<mx:Script>
<![CDATA[
private function modifyViewPanel1():void {
trace("modifyView...");
if (panel1.parent) panel1.parent.removeChild(panel1);
if (panel1CheckBox.selected) {
vDivideBox.addChildAt(panel1, 0);
private function modifyViewPanel2():void {
trace("modifyView...");
if (panel2.parent) panel2.parent.removeChild(panel2);
if (panel2CheckBox.selected) {
vDivideBox.addChildAt(panel2,
vDivideBox.getChildren().length);
]]>
</mx:Script>
</mx:Application>

Answer 1

The properties you set with MXML tags are the initial values,
they aren't used to reset the controls. They would have to be
dynamic properties like width="{comp1.width/2}" for them to change
as the program runs. Setting a component's width to "50%" just
means it will initially be calculated to have 50% of the width of
its parent. As the program runs the component's width can change
which it what's happened.
Removing a child only removes the component from the parent's
display list. The component still exists and adding it back causes
the parent to recalculate its layout. This means it may change the
size of the children.
You have a couple of choices. You can give the Panel a
minHeight and the Divider will respect that. Or you can calculate
the Panel's height, set it to that value, then add it back to the
Divider.