html - CSS Flexbox 成长

Question

我在左侧面板 (.tree) 中使用 Angular 树控件 Light Style ( http://wix.github.io/angular-tree-control/ )。我在树旁边显示了项目（如图 1 所示）。当我的树展开时，.graph 项目向下移动，如图 2 所示。我希望我的 .graph 在树展开时保持原位（图 3）。我正在使用 flexbox，但图表继续向下移动。（下面的 CSS 和 HTML）

.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>