Scrollable Frame with grid not sticking to the border and not working

I would like to make a scrollable Frame.

from tkinter import *
from tkinter import ttk

class MainWindow:
    def __init__(self):
        self.metrics = []
        self.content = ttk.Frame(root)
        self.v = Scrollbar(root, orient = "vertical")
        self.class_label = Label(self.content, text = "labels")

        self.A_label = Label(self.content, text = "A")
        self.A_entry = Entry(self.content, width = 5)
        self.A_input = self.A_entry.get()
        self.A_hint = Label(self.content, text = "A")

        self.B_label = Label(self.content, text = "B")
        self.B_entry = Entry(self.content, width = 5)
        self.B_input = self.B_entry.get()
        self.B_hint = Label(self.content, text = "B")

        self.C = Label(self.content, text = "C")

        self.space = Label(self.content, text = "")

        self.D_label = Label(self.content, text = "D")
        self.D_entry = Entry(self.content, width = 5)
        self.D_hint = Label(self.content, text = "D")

        self.E_label = Label(self.content, text = "E")
        self.E_entry = Entry(self.content, width = 5)
        self.E_hint = Label(self.content, text = "D")

        self.F_label = Label(self.content, text = "F")
        self.F_entry = Entry(self.content, width = 5)
        self.F_hint = Label(self.content, text = "F")

        self.G_label = Label(self.content, text = "G")
        self.G_entry = Entry(self.content, width = 5)
        self.G_hint = Label(self.content, text = "G")

        self.H_label = Label(self.content, text = "H")
        self.H_entry = Entry(self.content, width = 5)
        self.H_hint = Label(self.content, text = "H")

        self.I_label = Label(self.content, text = "I")
        self.I_entry = Entry(self.content, width = 5)
        self.I_hint = Label(self.content, text = "I")

        self.J_label = Label(self.content, text = "J")
        self.J_entry = Entry(self.content, width = 5)
        self.J_hint = Label(self.content, text = "J")

        self.K_label = Label(self.content, text = "K")
        self.K_entry = Entry(self.content, width = 5)
        self.K_hint = Label(self.content, text = "K")

        self.space2 = Label(self.content, text = "")

        self.L_label = Label(self.content, text = "L")
        self.L_entry = Entry(self.content, width = 5)

        self.content.grid(row = 0, column = 0)
        self.v.grid(row = 0, column = 1, sticky = NS)

        self.class_label.grid(row = 0, column = 0)

        self.A_label.grid(row = 1, column = 0)
        self.A_entry.grid(row = 1, column = 1)
        self.A_hint.grid(row = 1, column = 3, sticky = "w")

        self.B_label.grid(row = 2, column = 0)
        self.B_entry.grid(row = 2, column = 1)
        self.B_hint.grid(row = 2, column = 3, sticky = "w")

        self.C.grid(row = 3, column = 3, sticky = "w")

        self.space.grid(row = 4, column = 0)


        self.D_label.grid(row = 6, column = 0)
        self.D_entry.grid(row = 6, column = 1)
        self.D_hint.grid(row = 6, column = 3, sticky = "w")

        self.E_label.grid(row = 7, column = 0)
        self.E_entry.grid(row = 7, column = 1)
        self.E_hint.grid(row = 7, column = 3, sticky = "w")

        self.F_label.grid(row = 8, column = 0)
        self.F_entry.grid(row = 8, column = 1)
        self.F_hint.grid(row = 8, column = 3, sticky = "w")

        self.G_label.grid(row = 9, column = 0)
        self.G_entry.grid(row = 9, column = 1)
        self.G_hint.grid(row = 9, column = 3, sticky = "w")

        self.H_label.grid(row = 10, column = 0)
        self.H_entry.grid(row = 10, column = 1)
        self.H_hint.grid(row = 10, column = 3, sticky = "w", columnspan = 2)

        self.I_label.grid(row = 11, column = 0)
        self.I_entry.grid(row = 11, column = 1)
        self.I_hint.grid(row = 11, column = 3, sticky = "w", columnspan = 2)

        self.J_label.grid(row = 12, column = 0)
        self.J_entry.grid(row = 12, column = 1)
        self.J_hint.grid(row = 12, column = 3, sticky = "w", columnspan = 2)

        self.K_label.grid(row = 13, column = 0)
        self.K_entry.grid(row = 13, column = 1)
        self.K_hint.grid(row = 13, column = 3, sticky = "w", columnspan = 2)

        self.space2.grid(row = 14, column = 0)

        self.L_label.grid(row = 19, column = 0)
        self.L_entry.grid(row = 19, column = 1)

        root.mainloop()



if __name__ == '__main__':
    root = Tk()

    root.title("title")
    new_window = MainWindow()

In this first example, the button in the scrollbar does appear but it can't scroll and when I change the window's size, the scrollbar doesn't move.

If I'm not mistaken, I need to create a canvas within my frame and put everything inside this canvas. However, I read that I'm also supposed to put an inner frame inside the canvas. How am I supposed to do it?

So I tried this:

from tkinter import ttk

options = ["A", "B", "C", "D", "E", "F", "G", "H"]

root = Tk()

root.title("random software")

content = ttk.Frame(root)

vscrollbar = Scrollbar(content, orient=VERTICAL)
scrollable_canvas = Canvas(content)

inner_frame = Frame(scrollable_canvas)

A_label = Label(content, text = "A")
A_entry = Entry(content, width = 5)
A_hint = Label(content, text = "lorem")

B_label = Label(content, text = "B")
B_entry = Entry(content, width = 5)
B_hint = Label(content, text = "ipsum")

C_label = Label(content, text = "C")
C_entry = Entry(content, width = 5)
C_hint = Label(content, text = "dolor")

D_label = Label(content, text = "D")
D_entry = Entry(content, width = 5)
D_hint = Label(content, text = "sit")

E_label = Label(content, text = "E")
E_entry = Entry(content, width = 5)
E_hint = Label(content, text = "amet")

F_label = Label(content, text = "F")
F_entry = Entry(content, width = 5)
F_hint = Label(content, text = "consectetur")

G_label = Label(content, text = "G")
G_entry = Entry(content, width = 5)
G_hint = Label(content, text = "adipiscing")

H_label = Label(content, text = "H")
H_entry = Entry(content, width = 5)
H_hint = Label(content, text = "elit")

selected_option = StringVar()
selected_option.set(options[0])
option_label = OptionMenu(content, selected_option, *options)

content.grid(row = 1, column = 0)
vscrollbar.grid(row = 1, column = 1, sticky = NS)

option_label.grid(row = 5, column = 1)

A_label.grid(row = 6, column = 0)
A_entry.grid(row = 6, column = 1)
A_hint.grid(row = 6, column = 3, sticky = "w")

B_label.grid(row = 7, column = 0)
B_entry.grid(row = 7, column = 1)
B_hint.grid(row = 7, column = 3, sticky = "w")

C_label.grid(row = 8, column = 0)
C_entry.grid(row = 8, column = 1)
C_hint.grid(row = 8, column = 3, sticky = "w")

D_label.grid(row = 9, column = 0)
D_entry.grid(row = 9, column = 1)
D_hint.grid(row = 9, column = 3, sticky = "w")

E_label.grid(row = 10, column = 0)
E_entry.grid(row = 10, column = 1)
E_hint.grid(row = 10, column = 3, sticky = "w")

F_label.grid(row = 11, column = 0)
F_entry.grid(row = 11, column = 1)
F_hint.grid(row = 11, column = 3, sticky = "w")

G_label.grid(row = 12, column = 0)
G_entry.grid(row = 12, column = 1)
G_hint.grid(row = 12, column = 3, sticky = "w")

H_label.grid(row = 13, column = 0)
H_entry.grid(row = 13, column = 1)
H_hint.grid(row = 13, column = 3, sticky = "w")



root.mainloop()

In this case, the scrollbar isn't extended from top to bottom, it doesn't appear on the right side of the window and when I change the window's size the scrollbar doesn't move. Why isn't it extended on the right side (like the first case) and how to make the scrollbar scrollable?

I saw a few answers with pack but I would like to continue using grid.