Why does the view of the website gets out of the HTML size?

Question

I have a navbar that contains the button that triggers the movement of the main container to the right and brings the nav elements to the right:

The cards in the middle have an animation that modifies their flex-grow when hovering and shows some text:

But when you hit the nav toggle button when one of these sections is being hovered this happens:

What I'm not understanding is that this view is out of the HTML element size and in theory it shouldn't look like this.

This is the code for the card, made with react & styled-components:

import styled from "styled-components"

const CardDiv = styled.div`
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: space-between;
    background-color: var(--Scania-Grey-900-transparent);
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    transition: flex-grow .5s;

    &:hover {
        flex-grow: 2;
    }

    &:hover .card_description_text {
        opacity: 1;
        line-height: 1.5em;
    }
`

const Title = styled.h1`
    font-family: var(--Scania-Font);
    text-transform: uppercase;
    color: var(--Scania-White);
`

const ImageBackground = styled.div`
    background-image: url(${props => props.background_image});
    background-repeat: no-repeat;
    background-size: cover;
    background-position: ${props => props.bg_position};
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
`

const Description = styled.div`
    display: flex;
    flex-direction: column;
    color: var(--Scania-White);
    opacity: 0;
    transition: opacity .2s, line-height .5s;
    line-height: .5px;
`

const Text = styled.p`
    font-family: var(--Scania-Font-2);
    margin: .8em;
    font-size: 1.1em;
`

const Padding = styled.div`
    margin: .8em;
`

const Button = styled.a`
    padding: .4em .8em;
    border: 2px solid var(--Scania-White);
    margin: .8em;
    text-align: center;
    font-family: var(--Scania-Font);
    font-size: 1.1em;
`

const Card = ({ background_image, title, bg_position, text, button_text }) => {
    return (
        <CardDiv>
            <ImageBackground background_image={background_image} bg_position={bg_position} role="background_image_card" />
            <Padding>
                <Title>{title}</Title>
            </Padding>
            <Description className="card_description_text">
                <Text>{text}</Text>
                <Button>{button_text}</Button>
            </Description>
        </CardDiv>
    )
}

export default Card

I'm sorry if this question is poor or if I don't know how to ask the question, but I would like to receive some help. Thank you :=)

EDIT:

This is the code of my main component Home():

export default function Home() {
/* This state is for the status of the navbar */
const [statusNavbar, setActiveNavbar] = useState(false)
const changeStatus = () => {
    setActiveNavbar(!statusNavbar)
}

return (
    <Main>
        <Navbar setNavbarStatus={changeStatus} />
        <Container statusNavbar={statusNavbar} />
    </Main>
)

}

this Container.jsx: is the component that goes after the navbar:

const Container = ({ statusNavbar }) => {
    return (
        <DivContainer>
            <NavbarElements navbarStatus={statusNavbar} />
            <Content navbarStatus={statusNavbar} />
        </DivContainer>
    )
}

export default Container

NavbarElements component is the part which is hidden by default, and when the burger is clicked, it comes to the right. And Content component is where the content is included the cards.

NavbarElements.jsx code:

const Div = styled.div`
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--Scania-Grey-400);
    min-height: 100%;
    width: ${sizesConfig.left_side_size}%;
    padding-right: ${sizesConfig.padding_spacing}%;
    transform: ${props => props.navbarStatus ? 'translateX(0%)' : 'translateX(-100%)'};
    transition: transform .5s ease;
`

const NavbarElements = ({ navbarStatus }) => {
  return (
    <Div navbarStatus={navbarStatus} role="Navbar-content">NavbarElements</Div>
  )
}

export default NavbarElements

Content.jsx code:

const Div = styled.div`
    transform: ${props => props.navbarStatus ? `translateX(${sizesConfig.left_side_size}%)` : 'translateX(0%)'};
    transition: transform .5s ease;
    flex: 1 0;
    display: flex;
`

const Content = ({ navbarStatus }) => {
  return (
    <Div navbarStatus={navbarStatus}>
      <CardsGrid />
    </Div> 
  )
}

export default Content

In case you were wondering, this is the sizesConfig object which is being used to change the sizes easily

Navbar.config.js code:

const left_side_size = 75
const padding_spacing = 100 -left_side_size 

export const sizesConfig = {
    left_side_size,
    padding_spacing,
}

Answer 1

So I managed to find a solution, from this post:

How can I "disable" zoom on a mobile web page?

---

The answer from @kgutteridge it's incorrect in this case since it has a problem:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

The meta tag above solves my problem about the viewport, but removes the capability of the user to zoom in/out which I read is a bad practice

---

@SW4 provides a better answer for problems like mine:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The meta tag above:

Renders the page at the width of the device, don't scale:

Which was exactly what I was looking for.