Во flex, как объявить элемент управления, чтобы взять всю доступную ширину

Question

Во Flex 4.0 у меня есть проект с видеодисплеем, под которым я создал несколько элементов управления (кнопка воспроизведения / паузы, HSlider для отображения прогресса, некоторые регуляторы громкости...)

Проблема возникает, когда вспышка отображается в окне, которое слишком мало для размещения всех элементов управления на нужной ширине. Я вижу, что некоторые элементы управления сдвинуты вправо, вне поля зрения. (Может быть, это потому, что они находятся в пользовательском контейнере, который действует как окно, но для этого нужна функциональность).

Я хочу обозначить HSlider как имеющий гибкую ширину, поэтому, когда пользователь создает небольшое окно, элементы на панели управления все еще видны, а HSlider достаточно сжат, чтобы это произошло...

Ура!

Изменить: код для моего окна (это VBox, который я хотел бы иметь переменный размер):

<ns1:CollapsableTitleWindow x="294" y="36.65" backgroundColor="#000000" width="436" height="373" id="wnd" title="test" allowClose="false">
    <mx:VideoDisplay width="100%" height="100%" id="vd" autoPlay="false" volume="1"/>
    <mx:ControlBar id="ctrlbarLiveVideo1" width="100%">
        <mx:Button width="30" height="22" id="btnPlay" click="{doplay();}" icon="{imgPlayButton}"/>
        <mx:VBox verticalGap="1" horizontalAlign="right">
            <mx:HSlider id="slider" width="100%" invertThumbDirection="true" maximum="{vd.totalTime}" minimum="0" tickInterval="{vd.totalTime/10}" value="{Number(vd.playheadTime)}" />
            <mx:Label text="{sec2hms(Number(vd.playheadTime))} / {sec2hms(Number(slider.maximum))}"/>
        </mx:VBox>

        <mx:HBox id="box" horizontalGap="1" verticalAlign="middle">
            <mx:Label id="lblVolume" text = "{String(Math.round(vd.volume*100))+'%'}"/>
            <mx:Button label="-" id="btnless" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume -= 0.10}"/>
            <mx:Button label="+" id="btnmore" width="34" height="22" verticalGap="0" labelPlacement="top" labelVerticalOffset="0" click = "{vd.volume += 0.10}"/>   
        </mx:HBox>
    </mx:ControlBar>
</ns1:CollapsableTitleWindow>

Производит этот скриншот:

Answer 1

Видимо, ответ был: установите minWidth HSlider явно равным 0:

<mx:HSlider minWidth="0" id="slider" width="100%" ... />

А также сделайте ширину VBox ="100%": (благодаря code90)

<mx:VBox width="100%" verticalGap="1" horizontalAlign="right">