CSS overflow property breaks my interactions with elements in chromium browsers

Question

I don't know why but, when I add an overflow property to my div container, then each element inside is not interactable (it just happens on chromium browsers, in firefox works properly), I can't select any text, grab images, etc... It behaves like I would use pointer-events: none; but I didn't, I need a scrollable div, and I can not do this due to that bug. Can someone explain that? Is there my mistake or just a normal bug with chromium-browser? I tried some scrollbar libraries, but it doesn't work as well. I use the translateZ() property and basically, it's a 3d cube in CSS, maybe the browser has a problem with 3d elements.

I prepared some quick example, look at that cube's second face. There's a text it goes over an element, because the element has just 100vh of height, when I add overflow and want to do it scrollable it takes all interactivity even the dev highlight tool doesn't react with that. I assume it could be because the browser thinks that element is not here on Z-axis, but away from here.

const cube = document.querySelector(".cube");
        const cnt = document.querySelector(".cnt");
        const wrapper = document.querySelector(".wrapper");

        document.addEventListener("wheel", e => {
            if (e.ctrlKey) return;
            if (e.deltaY > 0) {
                //scroll down
                cube.classList.add("rotated-down");
                wrapper.classList.add("wrapper-rotated-down");
            } else if (e.deltaY < 0) {
                //scroll up
                cube.classList.remove("rotated-down");
                wrapper.classList.add("wrapper-rotated-up");
            } else if (e.deltaX < 0) {
                //scroll up
                cube.classList.add("rotated-side");
            } else if (e.deltaX > 0) {
                //scroll up
                cube.classList.remove("rotated-side");
            }
        });

        wrapper.ontransitionend = e => {
            if (wrapper.classList.contains("wrapper-rotated-down")) {
                wrapper.classList.remove("wrapper-rotated-down");
            } else if (wrapper.classList.contains("wrapper-rotated-up")) {
                wrapper.classList.remove("wrapper-rotated-up");
            }
        };

        document.addEventListener("keydown", e => {
            if (e.key === "ArrowDown") {
                //scroll down
                cube.classList.add("rotated-down");
            } else if (e.key === "ArrowUp") {
                //scroll up
                cube.classList.remove("rotated-down");
            } else if (e.key === "ArrowLeft") {
                //scroll up
                cube.classList.add("rotated-side");
            } else if (e.key === "ArrowRight") {
                //scroll up
                cube.classList.remove("rotated-side");
            }
        });

@keyframes goAndCome {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(0.5);
            }

            100% {
                transform: scale(1);
            }
        }

        body {
            margin: 0;
            position: relative;
            width: 100vw;
            height: 100vh;
            background: #40a3ff;
            overflow: hidden;
        }

        .wrapper {
            transform: scale(1);
        }

        .wrapper-rotated-down {
            animation: goAndCome 0.7s 0s ease forwards;
        }

        .wrapper-rotated-up {
            animation: goAndCome 0.7s 0s ease forwards;
        }

        .cnt {
            perspective: 3000px;
        }

        .cube {
            position: relative;
            width: 100vw;
            height: 100vh;
            transform-style: preserve-3d;
            transform: translateZ(-50vh) rotateX(0) rotateY(0);
            transition: transform 0.5s 0s linear;
            box-shadow: inset 0 0 125px white;
        }

        .rotated-down {
            transform: translateZ(-50vh) rotateX(0.25turn);
        }

        .rotated-side {
            transform: translateZ(-50vh) rotateY(0.25turn);
        }

        .side {
            position: absolute;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            width: 100vw;
            height: 100vh;
            opacity: 0.9;
            color: rgb(255, 0, 0);
            font-size: 2rem;
        }

        .side:hover::before {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            content: "Active";
            font-size: 5rem;
            color: rgb(255 255 255);
        }

        .back {
            background: green;
            transform: rotateX(0) translateY(0) translateZ(50vh);
        }

        .bottom {
            overflow: auto;  /* - takes all interactivity from element */
            background: rgb(0, 66, 153);
            transform: rotateX(-90deg) rotateZ(0) translateY(0) translateZ(50vh);
        }

        .text {
            display: block;
        }

<div class="wrapper">
            <div class="cnt">
                <div class="cube">
                    <div class="side back"><span>Hello</span></div>
                    <div class="side bottom">
                        <div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                            <div>text</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>