TabNavigator内容宽度与TabNavigator本身不相等

Question

内容（这里是VBox）不与Tab对齐，换句话说，内容伸出一个像素（红色边框比Tab宽），如下图所示：
那么如何解决这个问题？

代码段：

<mx:Application
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        >
    <mx:TabNavigator id="tn"
                 width="300"
                 height="300"
                tabWidth="{tn.width/tn.numChildren}"
                borderStyle="solid"
                borderColor="#ff0000"
                backgroundColor="#ffffff"
                paddingTop="0">
            <mx:VBox id="vb1" width="100%" label="Tab 1" backgroundColor="#ffffff">
                <mx:Label text="width:{vb1.width}, height:{vb1.height}" />
            </mx:VBox>
            <mx:VBox id="vb2" width="100%" label="Tab 2" backgroundColor="#00ffff">
                <mx:Label text="width:{vb2.width}, height:{vb2.height}" />
            </mx:VBox>
        </mx:TabNavigator>
    </mx:Application>