Javascript 组件开始重叠，然后在调整窗口大小时移动

我正在编写一个拉力赛应用程序，它在单独的拉力赛容器中同时具有图表和网格。容器处于“vbox”（垂直框）布局中。它们的设置如下：

{
xtype:'容器'，
itemId:“rightView”，
弹性：1，
布局：“vbox”，
项目：[
{
xtype:'容器'，
itemId:“topRightView”，
弹性：1
},
{
xtype:'容器'，
itemId:'bottomRightView'，
弹性：1
}
]
}

其中图表位于topRightView，网格位于topRightView

首次渲染时，网格与图表完全重叠。但是，当我调整窗口的大小时，它们会转到它们应该位于的位置（图表位于网格上方）

网格和图表的css为：

。构建网格{
宽度：600px；
}
.建立图表{
边缘顶部：30px；
边框：虚线；
宽度：700px；
}

在检查了图表和网格html之后，我发现两者的位置都是相对的，所以不应该把它搞砸

我还尝试将不同的z索引放在这两个上，以确保它们不会重叠，但这并不奏效

---

网格在图表之前呈现，因此这可能是问题的一部分。我真的不知道该怎么办；任何帮助都将不胜感激！谢谢大家!

在顶部代码段中，添加以下行：

height: 400px,

放入将容纳图表的容器中。结果应该是这样的：

{
    xtype: 'container',
    itemId: 'rightView',
    flex: 1,
    layout: 'vbox',
    items: [
        {
            xtype: 'container',
            itemId: 'topRightView',
            height: 400px,
            flex: 1
        },
        {
            xtype: 'container',
            itemId: 'bottomRightView',
            flex: 1
        }
    ]
}