制作一个弹性容器滚动答案

【问题标题】：Make a flex container scroll制作一个弹性容器滚动
【发布时间】：2022-01-31 21:13:57
【问题描述】：

我有一个具有这种样式的 flex 容器：

section {
    width: 100vw;
    height: 100vh;
    display: flex;
    overflow-y: scroll;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

这部分有一些孩子（比如两个带有#one 和#two id 的div）。当我将它们的高度设置为height: 100%; 时，我希望它们使部分滚动（因为 2*100% = 200%，对吗？）。但相反，它们只是溢出了该部分。我如何做到这一点？

更具体地说，在以下 HTML 中：

<body>
<div id="root">
<section>
    <div id="one">Hi im div 1!</div>
    <div id="two">Hi im div 2!</div>
</section>
<section>
    <div id="three">Hi im div 3!</div>
</section>
</div>
</body>

以及正文和div#root的以下css：

body{
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
#root{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
#one, #two{
height : 100%;
}

我希望第一部分是可滚动的，而第二部分是完全适合视口的。很明显div#root 也可以滚动。

【问题讨论】：

添加相关的 HTML。
你可以使用自动溢出
@Saout 在哪个元素上？
该部分，但滚动已经在您的示例上工作，但是当不需要滚动时，您不能，尝试将高度设置为更小以了解发生了什么
@Sarout 对不起，我不明白：D，你能展示一个代码示例吗？

标签： html css flexbox

【解决方案1】：

正如您的描述，我创建了示例场景并且它正在运行。还是我错过了什么？

body{
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
}
#root{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.sec1{
  height: 200px;
  width: 200px;
  overflow-y: scroll;
}

#one{
  height: 250px;
}

<div id="root">
<section class="sec1">
    <div id="one">Hi im div 1!</div>
    <div id="two">Hi im div 2!</div>
</section>
<section>
    <div id="three">Hi im div 3!</div>
</section>
</div>

【讨论】：

它是整页滚动，而不仅仅是部分，我会用更具体的 HTML 更新问题
嗯，那会更具体。
100% 高度是一个相对属性。我使用 px 更改了 sn-p。
好吧，您没有将display: flex; 应用于部分元素
我添加了display: flex;，它仍然可以滚动，但是当您应用flex-direction: column 时，它不再可以滚动了

【解决方案2】：

你必须使部分更短，所以它的内容没有足够的地方容纳，然后溢出自动设置滚动

所以

section {
  width: 100vw;
  height: 25vh; //<-- 
  display: flex;
  overflow-y: auto;/*<-- scroll forces all sections to have handler and this is not recommended in you example*/
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

body {
  width: 100%; /* <-- just to show you the scrollbar */
  height: 100vh;
  /* overflow-x: hidden;<-- no need */
  /* overflow-y: scroll;<-- no need */
  scroll-behavior: smooth;
}

#root {
  width: 90%; /* <-- just to show you the scrollbar */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#one,
#two {
  height: 100%;
}

<div id="root">
  <section>
    <div id="one">Hi im div 1!</div>
    <div id="two">Hi im div 2!</div>
  </section>
  <section>
    <div id="three">Hi im div 3!</div>
  </section>
</div>

如果您对溢出一无所知，请查看this 和this。

【讨论】：

【解决方案3】：

虽然 Saurot's answer 非常有帮助，但我发现解决方案是为子 div 设置 flex: 0 0 100%。感谢大家！ :D

【讨论】：