頁面調整大小後，無法將flexbox容器拖動到頁腳

Question

調整頁面嵌套內容框大小後，通過主div取消並拆分它。

它看起來像這樣：

這裏是直播example（對重金屬鉻含量裝貨作業只）。這是jsfiddle

的CSS代碼，響應用於顯示問題（我認爲）部分：

.Central { 
     display: flex; 
     flex-direction: row; 
     flex-grow: 1; 
     height: auto; 
    } 
    .LeftSide { 
     background-color: #ddd0d1; 
     flex-grow: 8; 

    } 
    .RightSide{ 
     background-color: #965254; 
     flex-grow: 1; 
    } 

Answer 1

相反的height: 100vh，用min-height: 100vh。

.MainContainer { 
    background-color: #fee9ea; 
    margin-left: 0%; 
    margin-right: 0%; 
    /* height: 100vh; <-- remove fixed height */ 
    min-height: 100vh; /* new */ 
    box-sizing: border-box; 
    display: flex; 
    flex-direction: column; 
} 

這將釋放您的主容器以隨內容展開。

如果你喜歡固定的高度，然後保持height: 100vh，並添加垂直滾動：

.LeftSide { 
    background-color: #ddd0d1; 
    flex-grow: 8; 
    overflow: auto; /* new */ 
}