我正在用React和CSS設計一個儀表板布局。我有一個標題，側邊欄，和一個所有內容駐留的中間區域，例如圖表等。我在標題中有一個切換側邊欄的菜單圖標(從可見到隱藏，反之亦然)。當我在小于768像素的屏幕上時，側邊欄是默認隱藏的，直到現在一切正常，但當我單擊菜單圖標使側邊欄在移動屏幕上可見時，我希望包裝溢出-x，這樣用戶就可以看到中間區域的內容。overflow-x正在工作，但它也在包裝器外生成了一個overflow-y滾動，即使包裝器外什么也沒有。這種行為只在windows chrome和android chrome上出現。包裝器的高度是auto，儀表板的高度(包裝器的子級和標題和內容包裝器的父級(內容包裝器包括側欄和中間區域))是100vh。

我在Chrome中面臨這個問題(在Edge上工作良好),有溢出-y和高度。只有當側邊欄可見時，問題才會出現。我不想讓我的應用程序溢出，但它確實溢出了。

這是我想要的行為(http://webapplayers.com/homer_admin-v2.0/index.html)

和

這是我的應用程序(https://donatenow-crm.web.app/)

使用電子郵件:anwarhamza919@gmail.com

使用密碼:hamzaanwar123$

我有一個簡單的React JSX布局，在Edge上運行良好，但在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>

這是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%;
}

看起來你面臨的問題與overflow-x: auto的組合有關；而overflow-y:隱藏；在較小屏幕的媒體查詢中的. wrapper.toggled類上。這種組合導致Chrome瀏覽器上出現不必要的垂直滾動條。

要解決這個問題，您可以按如下方式修改CSS:

@media (max-width: 540px) {
  .wrapper.toggled {
    width: calc(100% + 17px); /* Adjust the value as per your needs */
    overflow: hidden;
  }
}

通過使用width:calc(100%+17px)；，創建一個適應垂直滾動條寬度的偏移量，防止它影響布局。您可能需要根據您的具體情況調整值17px。

另外，需要注意的是高度:100vh在。dashboard類也可以影響垂直滾動條的外觀。如果你的目的是。儀表板元素占用整個視口高度，可以嘗試使用height:calc(100 VH-)；并為設置適當的值，以便從計算中排除頁眉的高度。

問題是，您在告訴瀏覽器的切換選項中使用了這段代碼，從而產生了溢出-x

@media (max-width: 540px)
    .wrapper.toggled {
        overflow-x: auto;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }

這導致了這個溢出，你不需要這個代碼，只要刪除這個代碼，一切都會好的

我通過從包裝器中移除toggle類并在滿足特定條件的情況下將它添加到dashboard類旁邊來解決這個問題

.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;
  }
}