Python's Tkinter Horizontal Scroll with Buttons not working

I am trying to iterate image buttons horizontally. Scrollbar appears fine but it is not showing up more items when scroll. This scrollbar works perfectly fine on vertical scroll. Please review below code:

`from tkinter_scroll import *
from tkinter import *

for index in range(i):
    if len(PHOTOS[index]) > 0:
        for k,photo in enumerate(PHOTOS[index]):
            img_text = ""
            btn= Button(scrollable_body, highlightbackground='red', fg='red', text=img_text,bg='white',border='0', image=photo, command = lambda index=index, k=k: put_sprite(index,k), compound=LEFT, width='100', height='110')
            btn.pack(side="left", fill="both", expand="no", padx="5", pady="5")
            BTNS.append(btn)
scrollable_body.update()

#===== Tkinter Class ====
import tkinter as tk
from tkinter import ttk

class Scrollable(ttk.Frame):
    def __init__(self, frame, width=16):
        scrollbar = tk.Scrollbar(frame, width=width, orient='horizontal')
        scrollbar.pack(side=tk.BOTTOM, fill=tk.X, expand=True)
        
        self.canvas = tk.Canvas(frame, width=800, height=120, bg='white',xscrollcommand=scrollbar.set)
        self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
        scrollbar.config(command=self.canvas.xview)
        self.canvas.bind('<Configure>', self.__fill_canvas)
        tk.Frame.__init__(self, frame)
        self.windows_item = self.canvas.create_window(
            0, 0, window=self, anchor=tk.W)
    def __fill_canvas(self, event):
        "Enlarge the windows item to the canvas width"
        canvas_width = event.width
        self.canvas.itemconfig(self.windows_item, width=canvas_width)
    def update(self):
        "Update the canvas and the scrollregion"
        self.update_idletasks()
        self.canvas.config(scrollregion=self.canvas.bbox(self.windows_item))

There are few issues in your class Scrollable:

• Scrollable inherits from ttk.Frame, but you called tk.Frame.__init__(...)
• if you want to scroll horizontally, why do you set the width of the internal frame (i.e. instance of Scrollable) to same as the canvas?
• it is better to bind <Configure> event of the internal frame and update scrollregion of the canvas inside the bind callback

Below is the updated class Scrollable and an example of using it:

import tkinter as tk
from tkinter import ttk

class Scrollable(ttk.Frame):
    def __init__(self, frame, width=16):
        scrollbar = tk.Scrollbar(frame, width=width, orient='horizontal')
        scrollbar.pack(side=tk.BOTTOM, fill=tk.X)

        self.canvas = tk.Canvas(frame, width=800, height=120, bg='white', xscrollcommand=scrollbar.set)
        self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
        scrollbar.config(command=self.canvas.xview)
        ttk.Frame.__init__(self, self.canvas)
        self.windows_item = self.canvas.create_window(0, 0, window=self, anchor=tk.NW)
        self.bind("<Configure>", lambda e: self.canvas.config(scrollregion=self.canvas.bbox(self.windows_item)))

root = tk.Tk()

scrollable = Scrollable(root)

for i in range(20):
    tk.Button(scrollable, text=i+1, width=20).pack(side=tk.LEFT, padx=5, pady=5)

root.mainloop()

Result: