CSS Flexbox grow

Question

I am using Angular tree control Light Style (http://wix.github.io/angular-tree-control/) for my left panel (.tree). I have items displayed next to the tree (as displayed in Image 1). As my tree expands, the .graph item moves down as shown in Image 2. I would like my .graph to stay in place when the tree expands (Image 3). I am using flexbox but the graph continues to shift down. (CSS & HTML below)

.mainClass{
  display: -webkit-flex; 
  -webkit-flex-wrap: wrap;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.tree{
 flex-grow: 1;
}

.tiles {
 width: 12rem; 
}

.graph{
 max-width: 50%; 
 height: 520px;
 float: right;
}

<div class="mainClass">
 <treecontrol class="tree">
  </treecontrol>

  <div class="tiles">
  </div>

  <div class="graph">
  </div>
</div>