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

【问题标题】：Using flex to scroll one div and not another?使用 flex 滚动一个 div 而不是另一个？
【发布时间】：2015-11-18 19:39:43
【问题描述】：

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

【问题讨论】：

感谢您的适当编辑。
如果您将样式与标记分开，这是一种很好的做法，并且更容易理解。此外，为您的具体问题提供一个最小的、有效的示例将对那些试图帮助您的人有所帮助。您可以在堆栈 sn-p 的帮助下执行此操作 - 我已为您将您的代码放入其中。
谢谢比利。不幸的是，我认为我不能分享我的代码的细节，因为它是我在工作中遇到的一个错误，或者只是试图找到一个基本的修复而不涉及细节。 div 中的数据本身不应该与解决方案相关。
您只需要复制问题的最少代码。如果您需要一些内容来复制它，请使用一些虚拟内容 - 例如lorem ipsum
代码sn-p中如何使用overscroll？

标签： html css scroll flexbox

【解决方案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>

【讨论】：

感谢您的帮助。不完全正确，但它帮助我和我的同事找到了解决方案。该线程现在可以关闭了。