我有一个导航栏，其中包含触发主容器向右移动并将导航元素带到右侧的按钮：

中间的卡片有一个动画，可以在悬停时修改它们的弹性增长，并显示一些文本：

但是当你点击导航切换按钮时，其中一个部分被悬停时，会发生这种情况：

我不明白的是，这个视图超出了HTML元素的大小，理论上它不应该是这样的。
这是卡的代码，由React和风格的组件：

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（）的代码：

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组件是默认隐藏的部分，当汉堡被点击时，它会出现在右边。Content组件是包含内容的卡片。
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

如果您想知道，这是sizesConfig对象，用于轻松更改大小
Navbar.config.js代码：

const left_side_size = 75
const padding_spacing = 100 -left_side_size 

export const sizesConfig = {
    left_side_size,
    padding_spacing,
}