title: flex overflow hidden, but i need it to show
body: <p>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).</p>
  <p>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.</p>
  <p>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>
  <p>P.S. Any coding tips along with the answer would be really appreciated, keep in mind I'm just starting out</p>
  <p>This is my addBook() that runs the addBookHTML():</p>
  <pre><code>function addBook() {
      const newAuthor = document.getElementById(&quot;author&quot;).value;
      const newTitle = document.getElementById(&quot;title&quot;).value;
      const pageCount = document.getElementById(&quot;pages&quot;).value;
      const readOrNot = document.getElementById(&quot;read&quot;).value;
      newBook = new Book(newTitle, newAuthor, pageCount, readOrNot);
      library.push(newBook);
      console.log(&quot;Book Added via form&quot;);
      console.log(library);
      const additional = addBookHTML(newTitle, newAuthor, pageCount, readOrNot);
      console.log(additional);
      libraryContainer.appendChild(additional);
  }
  </code></pre>
  <p>This is my addBookHTML():</p>
  <pre><code>function addBookHTML (title, author, pages, read) {
      var newDiv = document.createElement(&quot;div&quot;);
      newDiv.className = &quot;book&quot;;
      var heading = document.createElement(&quot;h2&quot;);
      heading.appendChild(document.createTextNode(title));
      var item1 = document.createElement(&quot;li&quot;);
      item1.appendChild(document.createTextNode(&quot;Title: &quot; + title));
      var item2 = document.createElement(&quot;li&quot;);
      item2.appendChild(document.createTextNode(&quot;Author: &quot; + author));
      var item3 = document.createElement(&quot;li&quot;);
      item3.appendChild(document.createTextNode(&quot;Pages: &quot; + pages));
      var item4 = document.createElement(&quot;li&quot;);
      item4.appendChild(document.createTextNode(&quot;Read: &quot; + read));
      newDiv.appendChild(heading, item1, item2, item3, item4);
      return newDiv;
  }
  </code></pre>
  <p>And this is the css for my main tag, library-container, and book:</p>
  <pre><code>    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;
  }
  </code></pre>
  <p>And because I'm sure my js needs an exorcist, here's all my js code:</p>
  <pre><code>let library = [];
  let author = &quot;&quot;;
  let title = &quot;&quot;;
  let pages = 0;
  let read = false;
  let book1, book2, book3;
  
  let libraryContainer = document.querySelector(&quot;.library-container&quot;);
  
  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(&quot;author&quot;).value;
      const newTitle = document.getElementById(&quot;title&quot;).value;
      const pageCount = document.getElementById(&quot;pages&quot;).value;
      const readOrNot = document.getElementById(&quot;read&quot;).value;
      newBook = new Book(newTitle, newAuthor, pageCount, readOrNot);
      library.push(newBook);
      console.log(&quot;Book Added via form&quot;);
      console.log(library);
      const additional = addBookHTML(newTitle, newAuthor, pageCount, readOrNot);
      console.log(additional);
      libraryContainer.appendChild(additional);
  }
  
  function openForm() {
      document.getElementById(&quot;form-container&quot;).style.display = &quot;block&quot;;
      const doStuff = document.querySelector(&quot;.btn&quot;);
      doStuff.textContent = &quot;Add Book&quot;;
  }
  
  function addNewBook(Book) {
      if (!(Book in library)) {
          library.push(Book);
          console.log(&quot;Book Added&quot;);
      } else {
          console.log(&quot;Already in Library!&quot;);
      }
  }
  
  function addBookHTML (title, author, pages, read) {
      var newDiv = document.createElement(&quot;div&quot;);
      newDiv.className = &quot;book&quot;;
      var heading = document.createElement(&quot;h2&quot;);
      heading.appendChild(document.createTextNode(title));
      var item1 = document.createElement(&quot;li&quot;);
      item1.appendChild(document.createTextNode(&quot;Title: &quot; + title));
      var item2 = document.createElement(&quot;li&quot;);
      item2.appendChild(document.createTextNode(&quot;Author: &quot; + author));
      var item3 = document.createElement(&quot;li&quot;);
      item3.appendChild(document.createTextNode(&quot;Pages: &quot; + pages));
      var item4 = document.createElement(&quot;li&quot;);
      item4.appendChild(document.createTextNode(&quot;Read: &quot; + read));
      newDiv.appendChild(heading, item1, item2, item3, item4);
      return newDiv;
  }
  book1 = new Book(&quot;Suleika Jaouad&quot;, &quot;Between Two Kingdoms&quot;, 300, true);
  addNewBook(book1);
  book2 = new Book(&quot;Lessons in Chemistry&quot;, &quot;Bonnie Garmus&quot;, 350, true);
  addNewBook(book2);
  book3 = new Book(&quot;Selma Blair&quot;, &quot;Mean Baby&quot;, 200, true);
  addNewBook(book3);
  </code></pre>