角度組件中的Flexbox溢出滾動

我正嘗試使用Angular 2應用程序構建兩列設計。我創建了一個plunk來重現我的問題：https://plnkr.co/3Evxm9?p=info 角度組件中的Flexbox溢出滾動

我希望可滾動區域是紅色的div（.overflow），而不是.page。沒有.page { overflow: auto }頁面根本不會滾動，但我期望.overflow可以這樣做，因爲它的定義高度爲100%。 padding有抵消.top股利。我最初雖然使用margin代替，但沒有overflow: auto上.page，保證金去的.container外側邊界（其縮小到適合的高度（填充包括，保證金.overflow除外）。

我似乎誤解的行爲。在Flexbox的

來源

2017-07-15 user5365075

我做了一些調整，你的CSS，使紅色區域只能滾動

CSS：

.page { 
    width: 100%; height: 100vh; 
    background: red; 
    flex: 1; 
    overflow: hidden; 
} 

.overflow { 
    font-size: 30px; 
    padding-top: 64px; 
    height: 93vh; 
    overflow: scroll; 
}

謝謝你提供了一個運動員。它幫助你找到解決方案。這裏是link到編輯過的plunker。

希望這會有所幫助！

來源

2017-07-15 16:02:21 Nehal

感謝您的回覆！我的解決方案出現問題，確實運行良好，滾動條不顯示正確的區域。它應該直到藍色區域的底部。我需要紅色區域來填充藍色區域下面屏幕的剩餘空間。到目前爲止，我只能看到兩種方法：（1）邊緣高度爲藍色區域，高度爲100％; （2）'.page'用'display：flex'，列方向和'.overflow'用flex one，但是我們需要'.overflow'內的其他節點來執行滾動。我會upvote你:) – user5365075

角度組件中的Flexbox溢出滾動

回答

相關問題