Flexbox項目在視窗過短時會溢出容器，同時側邊欄無法保持底部對齊
我正在嘗試使用一個簡單的彈性佈局，其中包括一個標題、一個2x2的內容網格，然後是側邊欄。當視窗的寬度小於某個特定大小時，側邊欄應該會移動到螢幕底部。
目前，一旦達到該大小，如果將視窗的高度調得太小，網格內容將會重疊在標題上方，但我不知道為什麼會這樣。螢幕應該只是視圖高度的大小，但側邊欄的移動會導致其擴展。
@media (max-width:960px) {
.main-screen {
height: 100vh;
display: flex;
flex-direction: column-reverse;
.toolbar {
padding: 10px;
height: 90px;
width: auto;
}
.body {
display: flex;
.grid {
flex: 1;
max-height: 36vh;
}
.row1, .row2 {
flex: 1;
height: 10%;
max-width: 100%;
}
}
}
}
這是在jsfiddle中的完整程式碼
(只要調整視窗大小，就可以看到網格如何重疊在標題上方)
