Why is upscaled div not overflowing in the y-axis

import logo from "./logo.svg";import "./App.css";import "./components/header/Navbar.jsx";import Navbar from "./components/header/Navbar.jsx";import Hero from "./components/hero/Hero.jsx";import List from "./components/list/List.jsx";function App() {  return (<div className=""><Navbar /><Hero /><div className="flex flex-col space-y-[50px]"><List /></div></div>  );}export default App;

import "../../App.css";import Card from "./Card.jsx"import { useState, useRef, useEffect } from "react";function List(props) {  console.log("List component rendered");  const cards = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];  const [scrollCount, setScrollCount] = useState(0);  const myRef = useRef(null);  const executeForwardScroll = () => {    const vwPixelValue = window.innerWidth / 100;    const scrollLeftValue = 100 * (scrollCount + 1) * vwPixelValue;    myRef.current.scroll({      top: 0,      left: scrollLeftValue,      behavior: "smooth",    });    setScrollCount(prevCount => prevCount + 1);    console.log(scrollCount)  }  function executeBackwardScroll(){    const vwPixelValue = window.innerWidth / 100;    const scrollLeftValue = 100 * (scrollCount - 1) * vwPixelValue;    myRef.current.scroll({      top: 0,      left: scrollLeftValue,      behavior: "smooth",    });    setScrollCount(prevCount => prevCount - 1);    console.log(scrollCount);  }  return (<div className="relative"><h2 className="text-white pb-[1%] pl-[4%] text-[1.3vw] font-semibold">        List Heading</h2><div ref={myRef} className=" grid grid-flow-col gap-[0.4%] pl-[4%] no-scrollbar"><Card num="1" /><Card num="2" /><Card num="3" /><Card num="4" /><Card num="5" /><Card num="6" /><Card num="7" /><Card num="8" /><Card num="9" /><Card num="10" /><button  className="bg-black bg-opacity-50 absolute w-[4vw] h-[7.75vw] right-0 top-[2.945vw] z-20" onClick={executeForwardScroll}><p></p></button><button className={scrollCount > 0 ? "bg-black bg-opacity-50 absolute w-[4vw] h-[7.75vw] left-0 top-[2.945vw] z-20" : "hidden"} onClick={executeBackwardScroll}><p></p></button></div></div>  );}export default List;

import "../list/Card"import { useState, useRef } from "react";function Card(props) {    const [isHovered, setIsHovered] = useState(false);    const handleMouseEnter = () => {      setIsHovered(true);    };    const handleMouseLeave = () => {      setIsHovered(false);    };    return(<div className=""><div        className="bg-green-300 z-10 w-[13.75vw] h-[7.75vw] hover:scale-x-150 hover:scale-y-150 hover:z-30  hover:bg-slate-500"        onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}><p>{props.num}</p></div></div>    );  }  export default Card;