导航切换时卡片Hover导致视图超出HTML尺寸的问题求助

我实现了一个导航栏，点击按钮可触发主容器向右移动，同时显示侧边导航元素：

中间区域的卡片带有hover动画：触发hover时会修改flex-grow属性，同时显示隐藏的文本内容：

但现在遇到一个异常情况：当鼠标hover在某张卡片上时点击导航切换按钮，会出现视图超出HTML元素尺寸的问题：

我无法理解为何会出现这种问题，按逻辑来说不应该发生。以下是用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

补充相关代码 #

主组件Home.jsx

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>
)
}

Container.jsx

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

export default Container

NavbarElements.jsx

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

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

尺寸配置文件Navbar.config.js

const left_side_size = 75
const padding_spacing = 100 -left_side_size 

export const sizesConfig = {
    left_side_size,
    padding_spacing,
}

内容的提问来源于stack exchange，提问作者josmanuel