flex overflow hidden, but i need it to show

So, first things first, I'm a noob. Just starting the odin project library challenge and I've done it all myself so far (with a little help from stackoverflow).

My problem is, I'm adding a book to the library via js and also creating a div element in the addBookHTML function. I think the function body is correctly coded but for some reason, when I execute the function, there is no div being added to the library in the html and therefore no extra book is being shown when in the browser window.

Maybe it's a css problem? Because the inspector is telling me theres a flex overflow in the main tag. How do I show this overflow? Because its the book that I added!

P.S. Any coding tips along with the answer would be really appreciated, keep in mind I'm just starting out

This is my addBook() that runs the addBookHTML():

function addBook() {
    const newAuthor = document.getElementById("author").value;
    const newTitle = document.getElementById("title").value;
    const pageCount = document.getElementById("pages").value;
    const readOrNot = document.getElementById("read").value;
    newBook = new Book(newTitle, newAuthor, pageCount, readOrNot);
    library.push(newBook);
    console.log("Book Added via form");
    console.log(library);
    const additional = addBookHTML(newTitle, newAuthor, pageCount, readOrNot);
    console.log(additional);
    libraryContainer.appendChild(additional);
}

This is my addBookHTML():

function addBookHTML (title, author, pages, read) {
    var newDiv = document.createElement("div");
    newDiv.className = "book";
    var heading = document.createElement("h2");
    heading.appendChild(document.createTextNode(title));
    var item1 = document.createElement("li");
    item1.appendChild(document.createTextNode("Title: " + title));
    var item2 = document.createElement("li");
    item2.appendChild(document.createTextNode("Author: " + author));
    var item3 = document.createElement("li");
    item3.appendChild(document.createTextNode("Pages: " + pages));
    var item4 = document.createElement("li");
    item4.appendChild(document.createTextNode("Read: " + read));
    newDiv.appendChild(heading, item1, item2, item3, item4);
    return newDiv;
}

And this is the css for my main tag, library-container, and book:

    main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: gray;
        height: 500vh;
        z-index: 0;
    }

.book {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    list-style: none;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background-color: turquoise;
    margin: 10px 10px;
    height: 300px;
    width: 300px;
    border: 5px solid black;
    border-radius: 10px;
    transition: .1s linear;
}

.book:hover {
    transform: scale(1.02);
}

.library-container {
    display: flex;
    flex-grow: 1;
    flex-basis: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 700px;
}

And because I'm sure my js needs an exorcist, here's all my js code:

let library = [];
let author = "";
let title = "";
let pages = 0;
let read = false;
let book1, book2, book3;

let libraryContainer = document.querySelector(".library-container");

class Book {
    constructor(title, author, pages, read) {
        this.author = author;
        this.title = title;
        this.pages = pages;
        this.read = read;
    }
}

function addBook() {
    const newAuthor = document.getElementById("author").value;
    const newTitle = document.getElementById("title").value;
    const pageCount = document.getElementById("pages").value;
    const readOrNot = document.getElementById("read").value;
    newBook = new Book(newTitle, newAuthor, pageCount, readOrNot);
    library.push(newBook);
    console.log("Book Added via form");
    console.log(library);
    const additional = addBookHTML(newTitle, newAuthor, pageCount, readOrNot);
    console.log(additional);
    libraryContainer.appendChild(additional);
}

function openForm() {
    document.getElementById("form-container").style.display = "block";
    const doStuff = document.querySelector(".btn");
    doStuff.textContent = "Add Book";
}

function addNewBook(Book) {
    if (!(Book in library)) {
        library.push(Book);
        console.log("Book Added");
    } else {
        console.log("Already in Library!");
    }
}

function addBookHTML (title, author, pages, read) {
    var newDiv = document.createElement("div");
    newDiv.className = "book";
    var heading = document.createElement("h2");
    heading.appendChild(document.createTextNode(title));
    var item1 = document.createElement("li");
    item1.appendChild(document.createTextNode("Title: " + title));
    var item2 = document.createElement("li");
    item2.appendChild(document.createTextNode("Author: " + author));
    var item3 = document.createElement("li");
    item3.appendChild(document.createTextNode("Pages: " + pages));
    var item4 = document.createElement("li");
    item4.appendChild(document.createTextNode("Read: " + read));
    newDiv.appendChild(heading, item1, item2, item3, item4);
    return newDiv;
}
book1 = new Book("Suleika Jaouad", "Between Two Kingdoms", 300, true);
addNewBook(book1);
book2 = new Book("Lessons in Chemistry", "Bonnie Garmus", 350, true);
addNewBook(book2);
book3 = new Book("Selma Blair", "Mean Baby", 200, true);
addNewBook(book3);