使用 flex 滚动一个 div 而不是另一个？

Question

在 kendo window 上，我在主 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>

使用 flex 滚动一个 div 而不是另一个？

Using flex to scroll one div and not another?

html

css

scroll

flexbox