使用flex滾動一個div而不是另一個？

Question

在kendo窗口中，我在主div容器內有兩個div，主要內容和一個頁腳欄。我希望能夠在頁腳不滾動的情況下滾動主內容面板。

我一直在玩這個一會兒使用flex-grow和htmls自己overscroll屬性，但我不能讓一個移動沒有其他。任何幫助將不勝感激:)

我可以根據需要提供更多信息。

這代表什麼，我到目前爲止已經完成了基本的例子：

.container { 
 
    display: flex; 
 
    overflow: auto; 
 
    flex-flow: column wrap; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.main { 
 
    flex-grow: 1; 
 
    background: green; 
 
} 
 

 
.footer { 
 
    flex-grow: 0; 
 
    background: blue; 
 
}

<div class="container"> 
 
    <div class="main"><p> Main content </p> </div> 
 
    <div class="footer"> <p> Footer bar </p> </div> 
 
</div>

Answer 1

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
html { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 

 

 
.Main { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
} 
 

 
.Header { 
 
    height: auto; /* or height: Npx;, where N is a positive number */ 
 
    background: #84dcc6; 
 
    overflow-y: hidden; 
 
} 
 

 
.Footer { 
 
    flex: 1; 
 
    background: #ffa69e; 
 
    overflow-y: auto; 
 

 
}

<main class="Main"> 
 
    <header class="Header">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet.</header> 
 
    <footer class="Footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident adipisci cum nisi dignissimos quas molestiae, ullam labore iste quisquam nobis nam eius quos ducimus. Deserunt, molestias veniam tempore corrupti eveniet. 
 
    </footer> 
 
</main>