title: In flex, how to declare a control to take all available width
body: <p>In Flex 4.0, I have a project with a videodisplay, and below it some controls that I've created (play/pause button, HSlider for showing progress, some volume controls...)</p>
  
  <p>The problem arises when the flash is displayed in a window that is too small to fit all controls at their desired width. What I see is that some controls are pushed to the right, out of sight. (Maybe it's because they are in a custom container that acts as a window, but that's needed functionality).</p>
  
  <p>I want to designate the HSlider as having flexible width, so when the user creates a small window, the items in the control bar are still visible, and the HSlider is compressed enough to make that happen...</p>
  
  <p>Cheers!</p>
  
  <p>Edit: the code for my window (it's the VBox that I would like to have variable-sized):</p>
  
  <pre><code>&lt;ns1:CollapsableTitleWindow x="294" y="36.65" backgroundColor="#000000" width="436" height="373" id="wnd" title="test" allowClose="false"&gt;
      &lt;mx:VideoDisplay width="100%" height="100%" id="vd" autoPlay="false" volume="1"/&gt;
      &lt;mx:ControlBar id="ctrlbarLiveVideo1" width="100%"&gt;
          &lt;mx:Button width="30" height="22" id="btnPlay" click="{doplay();}" icon="{imgPlayButton}"/&gt;
          &lt;mx:VBox verticalGap="1" horizontalAlign="right"&gt;
              &lt;mx:HSlider id="slider" width="100%" invertThumbDirection="true" maximum="{vd.totalTime}" minimum="0" tickInterval="{vd.totalTime/10}" value="{Number(vd.playheadTime)}" /&gt;
              &lt;mx:Label text="{sec2hms(Number(vd.playheadTime))} / {sec2hms(Number(slider.maximum))}"/&gt;
          &lt;/mx:VBox&gt;
  
          &lt;mx:HBox id="box" horizontalGap="1" verticalAlign="middle"&gt;
              &lt;mx:Label id="lblVolume" text = "{String(Math.round(vd.volume*100))+'%'}"/&gt;
              &lt;mx:Button label="-" id="btnless" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume -= 0.10}"/&gt;
              &lt;mx:Button label="+" id="btnmore" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume += 0.10}"/&gt;   
          &lt;/mx:HBox&gt;
      &lt;/mx:ControlBar&gt;
  &lt;/ns1:CollapsableTitleWindow&gt;
  </code></pre>
  
  <p>Produces this screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/1LsMq.jpg" alt="screenshot"></p>