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

Question

在剑道窗口中，我在主 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>