There is an unwanted vertical scroll in my wrapper or body container ReactJS and CSS

Question

I am working on a dashboard layout with React and CSS. I have a header, sidebar, and a middle-area where all content resides for example charts graphs etc. I have a menu icon in the header that toggles the sidebar (from visible to hidden and vice versa). When I am on screen less than 768px, the sidebar is hidden by default, everything works up until now but when I click the menu icon to make the sidebar visible on mobile screens then I want the wrapper to overflow-x so that the user can see the middle-area content to the fullest. overflow-x is working but It is also generating an overflow-y scroll outside of the wrapper even though there is nothing outside the wrapper. This behavior is only seen with windows chrome and android chrome. The height of the wrapper is auto and the height of the dashboard (child of the wrapper and parent of the header and content-wrapper (content-wrapper includes sidebar and middle-area)) is 100vh.

I am facing this problem in Chrome (works fine on Edge) with overflow-y and height. The problem only occurs when the sidebar is visible. I do not my app to overflow-y but it does.

This is the behavior that I want (http://webapplayers.com/homer_admin-v2.0/index.html)

and

This is my app (https://donatenow-crm.web.app/)

use email: anwarhamza919@gmail.com

use password: hamzaanwar123$

I have a simple React JSX layout that works fine on Edge but not on chrome.

// sidebar toggled
const [sidebarToggled, setSidebarToggled] = useState(false);

// sidebarToggled(false) = sidebar visible
// sidebarToggled(true) = sidebar hidden

<div className={sidebarToggled?'wrapper':'wrapper toggled'}>
  <div className="dashboard">
     <Header />
    <div className="content-wrapper">
     <Sidebar />
     <div className="middle-area">
        <div className="middle-content"></div>
     </div>
    </div>
  </div>
</div>

Here is the CSS

.wrapper{
  width: 100%;
  overflow: hidden;
}

@media(max-width: 540px){  
//If I comment out this code, overflow won't cause the issue, something is wrong with the wrapper and wrapper.toggled
  .wrapper.toggled{
    width: fit-content;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.dashboard{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content-wrapper{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
}

header {
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border-bottom: 1px solid #eaeaea;
}

.sidebar{
  min-width: 180px;
  max-width: 180px;
  height: 100%;
  background-color: #f7f9fa;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.sidebar.hidden{
  margin-left: -180px;
}

.middle-area {
  width: 100%;
  background-color: #f1f3f6;
  border-left: 1px solid #eaeaea;
  padding: 25px 40px 40px 40px;
  min-width: 320px;
}
  
.middle-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

Answer 1

I solved the problem by removing the toggle class from the wrapper and adding it alongside the dashboard class if the specific condition met

.wrapper{
  width: 100%;
  overflow: hidden;
}

.dashboard{
  width: 100%;
  height: 100vh;
  height: var(--doc-height);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media(max-width: 540px){
  .wrapper{
    overflow-x: auto;
  }

  .dashboard.toggled{
    width: fit-content;
  }
}