我正在尝试创建一个语言选项组件。它具有垂直放置在父组件中的语言代码，如下所示：

当我将鼠标悬停在语言选项上时，它会突出显示字母代码（一个单独的样式组件）。我不知道如何让它覆盖父组件的宽度。
代码如下：
造型：

import styled, { css } from 'styled-components';

export const LanguagesWrapper = styled.div`
  background-color: #b0b2b7;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Add flex-grow property to expand vertically */
  padding: 0.3rem;
  gap: 0.8rem;
  
`;

export const StyledLanguagesTitle = styled.p`
  font-size: ${({theme}) => theme.typography.fontSize.medium};
  cursor: pointer;
  transition: background-color 0.3s;
  &:hover {
    background-color: #526d82;
  }
`;

export const ButtonForReferenceLink = styled.button<{
  icon: string;
}>`
  position: relative;
  width: 1.3rem;
  height: 1.3rem;
  background-image: url(${({icon}) => icon});
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-color: transparent;
  border: none;
  cursor: pointer;
  :first-of-type {
    height: 1.1rem;
  }
`;

import {useState} from 'react';
import {
  ButtonForReferenceLink,
  LanguagesWrapper,
  StyledLanguagesTitle,
} from './styles';
import {LanguageOptionsProps, ReferenceLinkProps} from './types';
import openNewTab from '../ModalsContent/References/utils/openNewTab';

const ReferenceLink = ({
  handleMouseOver,
  handleMouseOut,
}: ReferenceLinkProps) => {
  return (
    <ButtonForReferenceLink
      onMouseOver={handleMouseOver}
      onMouseOut={handleMouseOut}
      icon={'/images/arrow-up-right-from-square-solid.svg'}
      /* onClick={() => openNewTab(link)} */
    />
  );
};

const LanguageOptions = ({languages, link}: LanguageOptionsProps) => {
  const [isHovering, setIsHovering] = useState(false);

  const handleMouseOver = () => {
    setIsHovering(true);
  };

  const handleMouseLeave = () => {
    setIsHovering(false);
  };

  return (
    <>
      {!isHovering && (
        <ReferenceLink
          handleMouseOver={handleMouseOver}
          handleMouseOut={handleMouseLeave}
        />
      )}

      {isHovering && (
        <LanguagesWrapper
          onMouseOver={handleMouseOver}
          onMouseLeave={handleMouseLeave}>
          {languages.map((language, index) => (
            <StyledLanguagesTitle onClick={()=>openNewTab(link)
            } key={index} >
              {language}
              
            </StyledLanguagesTitle>
          ))}
        </LanguagesWrapper>
      )}
    </>
  );
};

export default LanguageOptions;

我试着玩周围的CSS，但无济于事