Flex spark Percent height not working

Question

First of all I know there is a spark VolumeBar component but, for design requirements I can't use it..

I'm trying to create a custom component but heights are not responding as should

[Update]

This is were I call the class

<components:VolumeSlider steps="4" height="100" />

The problem is that the volume slider is adapting perfectly, but My custom items component doesn't.

<s:HGroup width="100%" height="100%" maxHeight="{height}" >
        <s:VGroup width="100%" height="100%" paddingBottom="20" paddingTop="20">
            <s:VSlider id="slider" width="100%" height="100%" maximum="{_steps-1}" />
        </s:VGroup>

        <s:VGroup id="items" width="100%" height="100%" />
    </s:HGroup>



<fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            [Bindable]
            private var _steps:uint = 10;

            public function set steps( value:uint ):void
            {
                _steps = value;

                if ( items != null && items.numChildren != 0 )
                {
                    items.removeAllElements();
                }

                create();
            }

            private function create():void
            {
                for ( var i:uint = 0; i < _steps; ++i )
                {
                    var item:VolumeSliderItem = new VolumeSliderItem();
                    item.percentHeight = item.percentWidth = 100;
                    if ( items != null )items.addElement(item );
                }
            }



        ]]>
    </fx:Script>

where VolumeSliderItem is a spark button

Answer 1

I don't see any call to create(). I added 'creationComplete="create()"' on the Application tag, and then it created 10 sliders to the VGroup with id 'items'. Is that what you're looking for?