滚动位于知道其高度的祖先下方深处的元素

Question

我有类似以下内容：

#page {

  height: 200px; /* just for illustration, would be 100vh */

  border: 1px solid black; /* just for illustration */

  

  display: flex;

  flex-direction: column;

}

#nav {

  height: 30px;

  background-color: lightBlue;

  

  flex: none;

}

#content {

  background-color: lightGreen;

  display: flex;

  

  flex: 1 1 auto;

}

section {

  flex: 1 1 50%;

  padding: 5px;

  margin: 5px;

  border: 1px solid black;

}

.problem {

  color: white;

  background-color: red;

  height: 500px;

  overflow-y: auto;

}

<div id="page">

  <div id="nav">

    I'm a nav bar!

  </div>

  <div id="content">

    <section>

      Stuff

    </section>

    <section>

      More stuff

      <div class="problem">

        Oh no I'm huge and should scroll vertically

      </div>

    </section>

  </div>

</div>

我希望页面永远不会滚动，并且我只希望大的红色矩形在<section>. 我需要添加哪些规则才能使红色矩形了解其父级的边界？

Answer 1

您可以将您的部分设为 Flexbox 容器，然后设置Flex CSS 属性 （flex-grow、flex-shrink和flex-basis 的缩写）您希望它展开或收缩以占据所有剩余高度 =>flex-grow: 1;和flex-shrink: 1;flex-basis 的解释（来自这个答案）：弹性基础系数当 flex-basis 为 0 时，flex-grow 会忽略 Flex 项目中内容的大小，并将该行上的所有空间视为可用空间。这是绝对尺寸。线路上的所有空间均已分配。这就是我们这里需要的=>flex-basis: 0;代码如下：section {&nbsp; flex: 1 1 50%;&nbsp; padding: 5px;&nbsp; margin: 5px;&nbsp; border: 1px solid black;&nbsp; display: flex; /* added */&nbsp; flex-direction:column; /* added */}.problem {&nbsp; color: white;&nbsp; background-color: red;&nbsp; overflow-y: auto;&nbsp; flex: 1 1 0; /* added */}#page {&nbsp; height: 100vh; /* just for illustration, would be 100vh */&nbsp; border: 1px solid black; /* just for illustration */&nbsp;&nbsp;&nbsp; display: flex;&nbsp; flex-direction: column;}#nav {&nbsp; height: 30px;&nbsp; background-color: lightBlue;&nbsp;&nbsp;&nbsp; flex: none;}#content {&nbsp; background-color: lightGreen;&nbsp; display: flex;&nbsp;&nbsp;&nbsp; flex: 1 1 auto;}section {&nbsp; flex: 1 1 50%;&nbsp; padding: 5px;&nbsp; margin: 5px;&nbsp; border: 1px solid black;&nbsp; display: flex;&nbsp; flex-direction:column;}.problem {&nbsp; color: white;&nbsp; background-color: red;&nbsp; overflow-y: auto;&nbsp; flex: 1 1 0;}<div id="page">&nbsp; <div id="nav">&nbsp; &nbsp; I'm a nav bar!&nbsp; </div>&nbsp; <div id="content">&nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; Stuff&nbsp; &nbsp; </section>&nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; More stuff&nbsp; &nbsp; &nbsp; <div class="problem">&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; </div></div>如果您在 中添加更多内容div.problem，它将具有预期的行为#page {&nbsp; height: 100vh; /* just for illustration, would be 100vh */&nbsp; border: 1px solid black; /* just for illustration */&nbsp;&nbsp;&nbsp; display: flex;&nbsp; flex-direction: column;}#nav {&nbsp; height: 30px;&nbsp; background-color: lightBlue;&nbsp;&nbsp;&nbsp; flex: none;}#content {&nbsp; background-color: lightGreen;&nbsp; display: flex;&nbsp;&nbsp;&nbsp; flex: 1 1 auto;}section {&nbsp; flex: 1 1 50%;&nbsp; padding: 5px;&nbsp; margin: 5px;&nbsp; border: 1px solid black;&nbsp; display: flex;&nbsp; flex-direction:column;}.problem {&nbsp; color: white;&nbsp; background-color: red;&nbsp; overflow-y: auto;&nbsp; flex: 1 1 0;}<div id="page">&nbsp; <div id="nav">&nbsp; &nbsp; I'm a nav bar!&nbsp; </div>&nbsp; <div id="content">&nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; Stuff&nbsp; &nbsp; </section>&nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; More stuff&nbsp; &nbsp; &nbsp; <div class="problem">&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; &nbsp; Oh no I'm huge and should scroll vertically&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </section>&nbsp; </div></div>

Answer 2

#page {&nbsp; height: 200px; /* just for illustration, would be 100vh */&nbsp; border: 1px solid black; /* just for illustration */&nbsp; display: flex;&nbsp; flex-direction: column;}#nav {&nbsp; height: 30px;&nbsp; background-color: lightBlue;&nbsp; flex: 0 0 auto;}#content {&nbsp; background-color: lightGreen;&nbsp; display: flex;&nbsp; overflow: hidden;}section {&nbsp; flex: 1 1 50%;&nbsp; padding: 5px;&nbsp; margin: 5px;&nbsp; border: 1px solid black;&nbsp; overflow-y: auto;}.problem {&nbsp; color: white;&nbsp; background-color: red;&nbsp; height: 500px;}