title: Mx grid - very strange layout
body: <p><img src="https://i.stack.imgur.com/zXs71.jpg" alt="enter image description here">I work with flex 4.6 and I try to use mx:grid component to display component on my Air window.
  The goal is to align some component and to have a good resizing effect.
  See below code example and screenshot</p>
  
  <pre><code>    &lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                     xmlns:s="library://ns.adobe.com/flex/spark" 
                     xmlns:mx="library://ns.adobe.com/flex/mx" 
                     width="100%" verticalCenter="0" borderColor="#A8CB17"&gt;
      &lt;fx:Declarations&gt;
          &lt;!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). --&gt;
      &lt;/fx:Declarations&gt;
      &lt;mx:Grid width="100%"
               paddingBottom="5" paddingTop="5" paddingLeft="0" paddingRight="0" &gt;
          &lt;mx:GridRow id="cdr1" verticalAlign="middle" width="100%" &gt;
              &lt;mx:GridItem colSpan="2" width="100%" verticalAlign="middle" horizontalAlign="left"&gt;
                  &lt;s:Label text="Label" fontWeight="bold" width="100%" paddingTop="5" color="#333333"/&gt;
              &lt;/mx:GridItem&gt;
          &lt;/mx:GridRow&gt;
          &lt;mx:GridRow id="cdr2" width="100%" borderVisible="true" dropShadowVisible="false"
                      verticalAlign="middle"&gt;
              &lt;mx:GridItem width="100%" colSpan="1" horizontalAlign="right" verticalAlign="middle"&gt;
                  &lt;s:Label width="100%" horizontalCenter="0" text="Label1" textAlign="right"/&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem colSpan="2" width="100%" verticalAlign="middle" horizontalAlign="left"&gt;
                  &lt;s:HGroup width="100%"&gt;
                      &lt;s:CheckBox id="cbMolC1" label="Cb I" width="33%"/&gt;
                      &lt;s:CheckBox id="cbMolC2" label="cb. II" width="33%"/&gt;
                      &lt;s:CheckBox id="cbMolC3" label="Cb III" width="33%"/&gt;
                  &lt;/s:HGroup&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem colSpan="4" width="100%" verticalAlign="middle" horizontalAlign="left"&gt;
                  &lt;s:TextInput id="tiClassMol" width="100%"/&gt;
              &lt;/mx:GridItem&gt;
  
          &lt;/mx:GridRow&gt;
  
          &lt;mx:GridRow id="cdr3" verticalAlign="middle" width="100%" &gt;
              &lt;mx:GridItem colSpan="1" width="100%" verticalAlign="middle" horizontalAlign="right"&gt;
                  &lt;s:Label width="100%" horizontalCenter="0" text="Label 2" textAlign="right"/&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem colSpan="2" width="100%" verticalAlign="middle" horizontalAlign="right"&gt;
                  &lt;s:HGroup width="100%"&gt;
                      &lt;s:CheckBox id="cbMolC1" label="Cb I" width="33%"/&gt;
                      &lt;s:CheckBox id="cbMolC2" label="Cb II" width="33%"/&gt;
                      &lt;s:CheckBox id="cbMolC3" label="Cb III" width="33%"/&gt;
                  &lt;/s:HGroup&gt;
              &lt;/mx:GridItem&gt;
              &lt;mx:GridItem colSpan="4" width="100%" verticalAlign="middle" horizontalAlign="left"&gt;
                  &lt;s:TextInput id="tiClassMol" width="100%"/&gt;
              &lt;/mx:GridItem&gt;
          &lt;/mx:GridRow&gt;
      &lt;/mx:Grid&gt;
  &lt;/s:BorderContainer&gt;
  </code></pre>
  
  <p>My problem is that, even if textinput is place on a grid item whom colspan = 4, the size of this grid item is the same that the first grid item whom colspan =1.</p>
  
  <p>So, I think that is very strange.</p>
  
  <p>Could you help me.</p>
  
  <p>Thanks</p>