increase dropdown menu width more than the parent element

Question

I want to open a dropdown menu when a button is clicked in react but the problem is that i want that menu more broad but the maximum width i can get is equal to the parent element which is not enough and if i try to use px width to do this then all the css get disturbed , so how can i make a broader dropdown without disturbing the css , here is an image ;-

the dropdown i am talking about is the one just below the profile pic I dont know what parts of CSS should i share so thats why i attached this picture with this chrome extension enabled which shows the structure of css with those lines EDIT :- Code:-

<div className={Personal_profilecss.upperpart_content} id={Personal_profilecss.upperpart_lower}>
          <div className={Personal_profilecss.upperpart_lower_content} id={Personal_profilecss.upperpart_lower_1}>
            <div id={Personal_profilecss.upperpart_lower_1_box}>
              <div id={Personal_profilecss.upperpart_lower_1_1}>
                <div id={Personal_profilecss.circle} onClick={check_profile_pic}>
                  <img className={Personal_profilecss.circle_image} src={profile_info.profile_image} alt="" />
                  {
                    profile_click==true?
                    <div className={Personal_profilecss.iamge_dropdown}>
                      <div id={Personal_profilecss.check_pic}>
                        <ImageOutlinedIcon/> View Profile Pic
                      </div>
                      <div id={Personal_profilecss.update_pic}>
                      <PersonOutlinedIcon/> Update Profile Pic
                      </div>
                    </div>
                    :
                    ''
                  }
                </div>
              </div>
              <div id={Personal_profilecss.upperpart_lower_1_2}>
                <div id={Personal_profilecss.upperpart_lower_1_2_1}>
                  <h2>{profile_info.first_name}    {profile_info.second_name}</h2>
                </div>
              </div>
              <div id={Personal_profilecss.upperpart_lower_1_3}>
                  <Button variant="secondary" className={Personal_profilecss.button} id={Personal_profilecss.button_1} size="lg">
                  <AddCircleOutlineIcon/> Add Story
                  </Button>
                  <Button variant="primary" className={Personal_profilecss.button} id={Personal_profilecss.button_2} size="lg">
                  <EditIcon/> Edit Profile
                  </Button>
              </div>
            </div>
            
          </div>
          <div className={Personal_profilecss.upperpart_lower_content} id={Personal_profilecss.upperpart_lower_2}>
            <div  id={Personal_profilecss.upperpart_lower_2_box}>
              <div  id={Personal_profilecss.upperpart_lower_2_box_leftside}>
                <Button  className={Personal_profilecss.upperpart_lower_2_box_leftside_items} id={Personal_profilecss.Posts}>Posts</Button>
                <Button className={Personal_profilecss.upperpart_lower_2_box_leftside_items} id={Personal_profilecss.About}>About</Button>
                <Button className={Personal_profilecss.upperpart_lower_2_box_leftside_items} id={Personal_profilecss.Friends}>Friends</Button>
                <Button className={Personal_profilecss.upperpart_lower_2_box_leftside_items} id={Personal_profilecss.Photos}>Photos</Button>
                <Button className={Personal_profilecss.upperpart_lower_2_box_leftside_items} id={Personal_profilecss.Videos}>Videos</Button>
                <Button className={Personal_profilecss.upperpart_lower_2_box_leftside_items} id={Personal_profilecss.Check_ins}>Check-in</Button>
                <Button className={Personal_profilecss.upperpart_lower_2_box_leftside_items} id={Personal_profilecss.More}>More</Button>
              </div>
              <div  id={Personal_profilecss.upperpart_lower_2_box_rightside}>
                <Button  id={Personal_profilecss.three_dots} size="sm">
                    <MoreHorizIcon fontSize='small'/>
                  </Button>
              </div>
            </div>
          </div>
        </div>

CSS:-

#upperpart_lower{
    height: 40%;
    width: 100%;
    display: grid;
    grid-template-rows: 3fr 1fr;
}

#upperpart_lower_1{
    display: flex;
    justify-content: center;
    background-color: #242526;
}

#upperpart_lower_1_box{
    display: grid;
    grid-template-columns: 1.4fr 3fr 2.5fr;
    width: 50%;
    margin-bottom: .5%;
}

#upperpart_lower_1_1{
    /* border: 2px solid black; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    bottom: 20%;
}

#circle{
    border-radius: 50%;
    height: 100%;
    width: 100%;
    
}

.circle_image{
    clip-path: circle();
    width: 100%;
    height: 100%;
}

.iamge_dropdown{
    border: 2px solid white;
    color: white;
    background-color: #242526;
    
}

#upperpart_lower_1_2{
    /* border: 2px solid black; */
    display: flex;
    align-items: center;
}

#upperpart_lower_1_2_1{
    font-size: 2rem;
    color: white;
}

#upperpart_lower_1_3{
    display: flex;
    align-items: flex-end;
    gap: 4%;
    margin-bottom: 20%;
}

.button{
    height: 35%;
    width: 60%;
    display: flex;
    align-items: center;
    font-size: 1rem;
    gap: 4%;
}

#button_1{
    background-color: #3a3b3c;
    border: none;
    border-radius: 8px;
}
#button_1 img{
    width: 25%;
    height: 90%;
    color: white;
}

#button_2{
    display: flex;
    justify-content: center;
    background-color: #2475e1;
    
}

Answer 1

In general, all the styling for elements such as Dropdown, radio buttons,checkboxes are handled by the OS. You can look here for more information about them enter link description here