Flex 4 UI Layout Constraint mis-behavior

Question

Hello,
So here is the problem, below is basically my application wireframe in mxml. The problem comes in when I'm looking at a report component, so the reportComponents is visible, not the filterComponents.
What is happening is the UI element is sliding outside the container to the left when the browser resizes, it literally slides right off the screen.
I have tried defining layouts and layout contraints and other various fixes to no avail.
Can anyone help me?
    <s:SkinnableContainer width="100%" minWidth="768" maxHeight="800"  >    
        <!-- Reports Components - ReportsHolder manages which report is being viewed.... SubChiron has variances depending on which report, but configures itself accordingly -->
        <s:Group  id="ReportComponents" horizontalCenter="0" left="5"
                  width="100%" bottom.reportState="0" top="10"
                  height.loadingState="0" height.loadedState="0" height.reportState="100%"
                  alpha.loadingState="0" alpha.loadedState="0" alpha.reportState="1"
                  visible.loadedState="false">    
            <components:SubChiron id="subChiron" top="155" height.loadedState="0" alpha.loadedState="0"
                                  REPORT_VIEW_EVENT="ReportViewStateChange(event)" PE_TO_STATE="pEStateChange(event)" PART_COST_EVENT="pcReportChange(event)"
                                  CPP_EVENT="cppEventHandler(event)" EVAL_QUESTION_EVENT="EvalQuestionEventHandler(event)" EVAL_FILTER_EVENT="EvalFilterHandler(event)"
                                  PRINT_GRID_EVENT="PrintGridHandler(event)"/>
            <views:ReportsHolder top="250" id="reportsComponent" height.reportState="65%" minHeight.reportState="650" width="100%" height="0" bottom="0" left="5"/>
        </s:Group>
        <views:Chiron id="ApplicationControlPanel" top="0"
                      RESET_EVENT="resetDataHandler()" HOME_EVENT="homeEventHandler()" SELECT_SEARCH_EVENT="searchResultHandler(event)" />
        <s:Group id="dashboardComponents"
                 alpha.loadingState="0" alpha.loadedState="1" alpha.reportState="0" visible.reportState="false"
                 height.reportState="0"
                 width="100%" height="100%">
            <mx:HBox top="170" bottom="15" horizontalCenter="0" width="98%" height="100%" horizontalGap="10">
                <views:Filters id="FiltersPanel" left="15" FILTER_EVENT="AddFilterHandler(event)" FILTER_XMLLIST_EVENT="AddSpecialFilterHandler(event)" />
                <views:FiltersStates id="FiltersStatesPanel" FILTER_SET_EVENT="filterSet(event)" FILTER_SET_EVENT2="filterSet(event)" FILTER_SET_EVENT3="filterSet(event)" FILTER_SET_EVENT4="filterSet(event)" left="235" />
                <views:Results id="ResultsPanel" RESULT_SET_EVENT="programCountDispatchHandler()" SELECT_SEARCH_EVENT="searchResultHandler(event)"  />
                <views:Reports id="ReportsPanel" right="15" REPORT_GENERATION_EVENT="doReportGeneration(event)" />
            </mx:HBox>
        </s:Group>
    </s:SkinnableContainer>  

Answer 1

It's really hard to tell what is going on without being able to run your sample.  My wild guess would be that this is working as it should since you set <views:Reports id="ReportsPanel" right="15" ... which means that the panel will always be glued to the right of its parent container.  So if that parent container gets smaller then the reports panel will move to the left to ensure the right="15" constraint is satisfied.