tkinter scrollbar only scrolls downwards and cuts off content

The main issue is that you are using place and with place you will be the allmighty over the widget, means there will be no requested size to the master or any other magic tkinter provides in the background. So I do recommand to use another geometry manager that does that magic for you like pack. Also note that I set the anchor to nw.

In addition it appears that you can only use the optional argument in_ in a common master. So the key of that concept is to have an holder frame that is used as master parameter and use the in_ for children that are able to hold widgets.

import tkinter as tk

class Example:
    def __init__(self):
        self.root = tk.Tk()
        test_frame = tk.Frame(self.root,height=200,width=400,bg='orange')
        test_frame.pack()
        self.DISPLAY_WIDTH = 200
        self.DISPLAY_HEIGHT= 200
        self.create_holder()
        self.create_displays()
        self.add_scrollbars()
        self.populate_holder()
    def create_holder(self):
        '''creates a canvas for the displays and is needed
         to have a common border/window'''
        self.holder = tk.Canvas(self.root,width=self.DISPLAY_WIDTH*2,height=self.DISPLAY_HEIGHT)
        self.holder_frame = tk.Frame(self.holder)
        self.holder.create_window((5, 6), window=self.holder_frame, anchor="nw")
        self.holder.pack()
    def create_displays(self):
        '''creates 2 displays to have seperate scrollregions'''
        self.cnvs1 = tk.Canvas(self.holder_frame,
                               width=self.DISPLAY_WIDTH,
                               height=self.DISPLAY_HEIGHT)
        self.cnvs2 = tk.Canvas(self.holder_frame,
                               width=self.DISPLAY_WIDTH,
                               height=self.DISPLAY_HEIGHT)
        self.lf1 = tk.Frame(self.cnvs1);self.cnvs1.create_window((5, 6), window=self.lf1, anchor="nw")
        self.lf2 = tk.Frame(self.cnvs2);self.cnvs2.create_window((5, 6), window=self.lf2, anchor="nw")
    def add_scrollbars(self):        
        self.vsb1 = tk.Scrollbar(self.holder_frame, orient="vertical", command=self.cnvs1.yview)
        self.vsb2 = tk.Scrollbar(self.holder_frame, orient="vertical", command=self.cnvs2.yview)        
        self.cnvs1.configure(yscrollcommand=self.vsb1.set)
        self.lf1.bind("<Configure>", self.onFrameConfigure)
        self.cnvs2.configure(yscrollcommand=self.vsb2.set)
        self.lf2.bind("<Configure>", self.onFrameConfigure)
    def populate_holder(self):
        self.cnvs1.pack(side="left", fill="both", expand=True)
        self.vsb1.pack(side="left", fill="y")
        self.cnvs2.pack(side="right", fill="both", expand=True)
        self.vsb2.pack(side="right", fill="y")

        for i in range(20):
            button = tk.Button(self.holder_frame,text="Click me")
            button.config(command=lambda b=button:self.on_click(b))
            button.pack(in_=self.lf1)
    def start(self):
        self.root.mainloop()
    def onFrameConfigure(self, event):
        self.cnvs1.configure(scrollregion=self.cnvs1.bbox("all"))
        self.cnvs2.configure(scrollregion=self.cnvs2.bbox("all"))

    def on_click(self,button):
        current_frame = button.pack_info().get("in")
        new_frame = self.lf1 if current_frame == self.lf2 else self.lf2
        button.pack(in_=new_frame)


Example().start()

If you're creating a vertical stack of widgets, you're overcomplicating the solution when you embed a frame in a canvas. Instead, you can create the buttons directly in the canvas. The only time an embedded frame is useful is when you want to leverage the power of pack or grid to arrange the widgets into a complex layout. In this case you're creating a vertical stack, so the frame is unnecessary.

Here are a few things to notice about the following code:

• the buttons are a child of the canvas, not a child of root. I don't know why you were making the buttons the child of the root window since they are going in the canvas. They need to be a child of the canvas so that they don't draw outside of the border of the canvas.

• a property named lasty will return the bottom y coordinate. Every new button will get added below this coordinate.

• this code doesn't use self.fav_templates for the sake of brevity.

import tkinter as tk

class ScrolledButtons(tk.Frame):
    def __init__(self, parent):
        super().__init__(parent)
        self.canvas = tk.Canvas(self)
        self.vsb = tk.Scrollbar(self, command=self.canvas.yview, orient="vertical")
        self.canvas.configure(yscrollcommand=self.vsb.set)

        self.vsb.pack(side="right", fill="y")
        self.canvas.pack(side="left", fill="both", expand=True)

        for n in range(20):
            x = 2
            y = self.lasty + 2
            btn = tk.Button(self.canvas, text=f'Button #{n}', command=lambda te=n: self._on_click(te))
            self.canvas.create_window(20, y, anchor="nw", window=btn)
        bbox = self.canvas.bbox("all")
        self.canvas.configure(scrollregion=(0, 0, bbox[2], bbox[3]))

    @property
    def lasty(self):
        bbox = self.canvas.bbox("all")
        lasty = bbox[3] if bbox else 0
        return lasty

root = tk.Tk()
w = ScrolledButtons(root)
w.pack(fill="both", expand=True)
root.mainloop()