How to get a horizontal scroll bar for a DataGrid

In my datagrid i have 2 columns only.One column contains more(above 500) characters at that time iam not getting horizontal scroll to view the full data.

Below is the code which iam using:

<?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.collections.ArrayCollection;
            
            private function init():void
            {
                  var array:ArrayCollection = new ArrayCollection();
                  array.addItem({errorCode: "World of Warcraft",sourceRecord: "ddddddddddddddddddddddsssssssssssssssssssssssssssssssseeeeeeeesdffffffffffffffffffffffffffffffdddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddeeeeeeeeee"});
            dgFilteredCount.dataProvider = array;
            }
            
      ]]>
</mx:Script>
<mx:Canvas id="emailCanvas" width="100%"  >
      

      <mx:DataGrid id="dgFilteredCount" automationName="dgFilteredCount"
              width="100%"  horizontalScrollPolicy="on"
            
             height="355"  >
      
                  <mx:DataGridColumn id="errorCode" dataField="errorCode" minWidth="50"  color="black" headerText="{resourceManager.getString('locale', 'listManager.filters.ErrorCode')}"/>
                  <mx:DataGridColumn id="sourceRecord" dataField="sourceRecord" minWidth="50"  color="black" headerText="{resourceManager.getString('locale', 'listManager.filters.SourceRecord')}"/>
                  
            
      </mx:DataGrid>
      </mx:Canvas>
</mx:Application>