'Scrollable Frame in Tkinter

I'm trying to create Scrollable frame in tkinter with a lot of buttons in such a way that the window is divided into 2 columns and multiple rows and when I resize the window then the buttons will resize appropriately. The problem is that now my window is never scrollable because buttons are smaller and smaller when I'm adding more of them. Whats wrong with my code? So simply I would like to have the buttons with a given size and then eventually its size should change when I change window size.

def handle_canvas_resize(event):
    canvas.itemconfigure(window_id, width=event.width, height = event.height)

def handle_frame_resize(event):
    canvas.configure(scrollregion=canvas.bbox("all"))

root = Tk()
root.configure(bg = "blue")
# root.geometry("500x500")

root.rowconfigure(0, weight = 1)
root.columnconfigure(0, weight = 1)

frameMain = Frame(root)
frameMain.grid(row = 0, column = 0, sticky = 'nsew')
frameMain.rowconfigure(0, weight = 1)
frameMain.columnconfigure(0, weight = 1)

canvas = Canvas(frameMain, bg = 'green')
canvas.grid(row = 0, column = 0, sticky = 'nsew')
canvas.rowconfigure(0, weight = 1)
canvas.columnconfigure(0, weight = 1)

# Scrollbar
vsb = Scrollbar(frameMain, orient="vertical", command=canvas.yview)
canvas.configure(yscrollcommand=vsb.set)
vsb.grid(row=0, column=1, sticky=N+S)

hsb = Scrollbar(frameMain, orient="horizontal", command=canvas.xview)
canvas.configure(xscrollcommand=hsb.set)
hsb.grid(row=1, column=0, sticky=E+W)

frame = Frame(canvas, bg = 'red')
frame.grid(row = 0, column = 0, sticky = 'nsew')
frame.columnconfigure(0, weight = 1)
frame.rowconfigure(0, weight = 1)
frame.columnconfigure(1, weight = 1)
frame.rowconfigure(1, weight = 1)
frame.rowconfigure(2, weight = 1)
frame.rowconfigure(3, weight = 1)


window_id = canvas.create_window((0,0), window=frame, anchor = 'nw')

button1 = Button(frame, text = "Button 1", width = 400, height = 500)
button2 = Button(frame, text = "Button 2", width = 400, height = 500)
button3 = Button(frame, text = "Button 3", width = 400, height = 500)
button4 = Button(frame, text = "Button 4", width = 400, height = 500)
button5 = Button(frame, text = "Button 3", width = 400, height = 500)
button6 = Button(frame, text = "Button 4", width = 400, height = 500)
button7 = Button(frame, text = "Button 4", width = 400, height = 500)


button1.grid(row = 0, column = 0, sticky = 'nsew')
button2.grid(row = 0, column = 1, sticky = 'nsew')
button3.grid(row = 1, column = 0, sticky = 'nsew')
button4.grid(row = 1, column = 1, sticky = 'nsew')
button5.grid(row = 2, column = 0, sticky = 'nsew')
button6.grid(row = 2, column = 1, sticky = 'nsew')
button7.grid(row = 3, column = 1, sticky = 'nsew')



frame.bind("<Configure>", handle_frame_resize)
canvas.bind("<Configure>", handle_canvas_resize)



root.mainloop()


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source