在Flex中如何实现MS Project方式的容器布局？100分

  最近在做甘特图，现在遇到一个问题，功能差不多都实现了，就是不知道怎样实现MS Project那样的容器布局。我左边任务显示是使用的DataGrid，右边图形显示是一个Grid，但怎么将它们放在一起，中间加拖动条，可以随意的调整两边的大小。另外就是怎么加上垂直滚动条，使它们同时滚动。我考虑过HDividedBox，但是无法达到最终效果，下面有个例子，将Canvas的高度设为和HDividedBox一样的话，两边的水平滚动条可以正常显示，但是HDividedBox的垂直滚动条就不会出现了。如果将Canvas的高度设为大于HDividedBox的高度，那么水平滚动条就看不见了，除非拖动HDividedBox垂直滚动条到底才能看到。头都大了，请达人们帮我解决这个问题。贴上源码。只要问题解决了，100分送上。
XML code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:HDividedBox width="800" height="600" backgroundColor="#FFFFFF">
<mx:Canvas width="40%" verticalScrollPolicy="off" backgroundColor="#FFFFFF" height="600">
<mx:TextArea width="500" height="700" horizontalScrollPolicy="off" wordWrap="false" text="111111111111111111111111111111111111111111111111111111111111111111111111"/>
</mx:Canvas>
<mx:Canvas width="60%" verticalScrol