[flexcoders] Dynamically generated DataGrids having troubles with column width

[lytvynyuk]

When DG created by AS and placed into tab navigator, it completely
ignores its width, why?
Here is an example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute"
     creationComplete="init();">
     <mx:Script>
         <![CDATA[
             import mx.controls.dataGridClasses.DataGridColumn;
             import mx.controls.DataGrid;
             import mx.containers.Canvas;
             private function init():void {
                 for(var i:int = 0; i < 3; i++) {
                         var canvas:Canvas = new Canvas();
                         var grid:DataGrid = new DataGrid();
                         grid.selectable = false;
                         canvas.label = "Panel2 " + i;
                         canvas.percentHeight = 100;
                         canvas.percentWidth = 100;
                         canvas.addChild(grid);

                         grid.percentHeight = 100;
                         grid.percentWidth = 100;
                         grid.variableRowHeight = true;

                         var columns:Array = new Array(new
DataGridColumn(), new DataGridColumn(), new DataGridColumn());
                         var nameColumn:DataGridColumn =
DataGridColumn(columns[0]);
                         nameColumn.dataField = "name";
                         nameColumn.headerText = "Full Name";
                         nameColumn.width = 100;
                         nameColumn.minWidth = 100;
                         var ipColumn:DataGridColumn =
DataGridColumn(columns[1]);
                         ipColumn.headerText = "Addresses";
                         ipColumn.dataField = "addr";
                         ipColumn.editable = false;
                         ipColumn.wordWrap = true;
                         var countColumn:DataGridColumn =
DataGridColumn(columns[2]);
                         countColumn.headerText = "Data Count";
                         //ipColumn.dataField = "devices";
                         countColumn.editable = false;
                         countColumn.width = 100;
                         countColumn.dataField = "datac";

                         grid.columns = columns;

                         //grid.dataProvider = context_m.devices;
                         navigator.addChild(canvas);
                     }
             }
         ]]>
     </mx:Script>
             <mx:TabNavigator right="10" left="10" top="60" bottom="40"
id="navigator">
             </mx:TabNavigator>
</mx:Application>

I expect tabs to be looking identical, what is going on here? Any other
approaches to achieve desirable result?