Hi, I have some before and after code to show you. I don't know if the HTML will come through and if it does not I'll put it into an Apache paste.
I ran an example of the following MXML snippet. It is a series of nested Containers with different layouts. <js:Container id="g1"> <js:beads> <js:BasicLayout /> </js:beads> <js:Container id="g2" width="200"> <js:beads> <js:VerticalLayout /> </js:beads> <js:Container id="g3" width="100%"> <js:beads> <js:VerticalLayout /> </js:beads> <js:TextButton id="b1" text="Button 1" /> <js:TextButton id="b2" text="Button 2" width="100%" /> <js:TextButton id="b3" text="Button 3" /> </js:Container> <js:TextButton id="b4" text="Button 4" /> </js:Container> </js:Container> This is what the HTML DOM looks like using the current FlexJS 0.8.0 SDK: <div id="g1" style="position: absolute; width: 200px; height: 96px;"> <div style="display: block; position: absolute; left: 0px; top: 0px;"> <div id="g2" style="position: absolute; width: 200px; height: 96px;"> <div style="display: block; position: absolute; left: 0px; top: 0px; width: 200px;"> <div id="g3" style="position: relative; width: 100%; display: block; height: 72px;"> <div style="display: block; position: absolute; left: 0px; top: 0px; width: 200px;"> <button type="button" class="TextButton" id="b1" style="position: relative; display: block;">Button 1</button> <button type="button" class="TextButton" id="b2" style="position: relative; width: 100%; display: block;">Button 2</button> <button type="button" class="TextButton" id="b3" style="position: relative; display: block;">Button 3</button> </div> </div> <button type="button" class="TextButton" id="b4" style="position: relative; display: block;">Button 4</button> </div> </div> </div> </div> This is what it will look like once I am finished: <div id="g1" style="overflow: hidden; position: absolute;"> <div id="g2" style="width: 200px; overflow: hidden; position: absolute;"> <div id="g3" style="width: 100%; overflow: hidden; display: block;"> <button type="button" class="TextButton" id="b1" style="display: block;">Button 1</button> <button type="button" class="TextButton" id="b2" style="width: 100%; display: block;">Button 2</button> <button type="button" class="TextButton" id="b3" style="display: block;">Button 3</button> </div> <button type="button" class="TextButton" id="b4" style="display: block;">Button 4</button> </div> </div> Notice that the "after" is much smaller and there are fewer style ingredients. You can see that in the original MXML the only specific size specified was width="200" on the g2 Container. In the "before" HTML, that 200 appears in multiple places. In the "after" HTML, the 200 size appears only on the g2 <div>, corresponding to the g2 MXML Container. Now its up to HTML to maintain this structure and anything that happens to do (such as adding more children). Finally, if a Container were to have the <js:ScrollingViewport> bead added to it, the only thing you would see in the HTML is overflow:hidden would change to overflow:auto for that particular <div>. —peter
