Python Tkinter在笔记本中放置框架和树视图

Question

我正在做一个非常简单的TKinter布局。它由一个带有两个标签的笔记本组成。在第一个选项卡中，我有1个帧，其中还有3个帧。这很好，如下所示：

然而，当我试图在最左边的红色框中添加一个树状视图时（令人困惑地称为top_frame）。它就在下面

如下图所示：

我想我的亲子关系是正确的，所以看不出为什么不按计划坐着

欢迎任何帮助。我的代码在下面，我需要结果将树视图放入红色框中。我花了很长时间试图解决这个问题，开始在笔记本中使用grid（），但即使切换到pack（）也没有运气

from tkinter import *
from tkinter import ttk

root = Tk()

tabControl = ttk.Notebook(root) 
  
tab1 = ttk.Frame(tabControl) 

tab2 = ttk.Frame(tabControl) 
  
tabControl.add(tab1, text ='Tab 1') 
tabControl.add(tab2, text ='Tab 2') 
tabControl.pack()




top_frame1 = Frame(tab1, bg='red', width = 450, height=400, relief=SUNKEN).pack(side=LEFT, fill = BOTH)
Mid_frame = Frame(tab1, bg='Orange', width = 450, height=100, relief=SUNKEN).pack(side=RIGHT, fill = BOTH)
bottom_frame = Frame(tab1, bg='green', width = 450, height=100, relief=SUNKEN).pack(side=RIGHT, fill = BOTH)

treeview_menu = ttk.Treeview(top_frame1)
treeview_menu.pack()
treeview_menu.insert('','0','m1', text = 'department 1')
treeview_menu.insert('','1','m2', text = 'department 2')
treeview_menu.insert('','2','m3', text = 'department 3')
treeview_menu.insert('','3','m4', text = 'department 4')
treeview_menu.insert('','4','m5', text = 'department 5')

treeview_menu.insert('m1','end','cs1', text = 'Staff Mbr1')
treeview_menu.insert('m1','end','cs2', text = 'Staff Mbr2')

treeview_menu.insert('m2','end','bc1', text = 'Staff Mbr1')
treeview_menu.insert('m2','end','bc2', text = 'Staff Mbr2')

treeview_menu.insert('m3','end','av1', text = 'Staff Mbr1')
treeview_menu.insert('m3','end','av2', text = 'Staff Mbr2')

treeview_menu.insert('m4','end','mc1', text = 'Staff Mbr1')
treeview_menu.insert('m4','end','mc2', text = 'Staff Mbr2')

treeview_menu.insert('m5','end','ss1', text = 'Staff Mbr1')
treeview_menu.insert('m5','end','ss2', text = 'Staff Mbr2')