带有溢出滚动的 Div 不会扩展到子级的高度

Question

我想要一个带有页眉、正文和页脚的布局。我不想使用display: fixed，所以我只滚动正文。我使用flex-grow: 1 来强制body 部分填充高度。

正文有 4 列。列比正文的高度高，因此正文滚动。但是，列不会滚动，只会滚动它们的内容。

在 this codepen 中，滚动中间部分的 4 列。请注意，列的金色背景不会滚动。相反，您会看到身体的橙色背景。

如果内容较少，如何让正文内容区域填满屏幕，但在滚动时内容背景也随着内容展开？我尝试添加清除 div 并将列高设置为 100%。

问题视频说明：http://recordit.co/eGpT87EmPp

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100vh;
}

.App {
  background: red;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.App .Header {
  background: violet;
  display: flex;
  min-height: 2rem;
}

.App .Header .Player {
  background: pink;
  flex: 1 1;
  text-align: center;
}

.App .Body {
  background: orange;
  display: flex;
  flex-grow: 1;
  overflow-y: scroll;
}

.App .Body .Column {
  background: gold;
  box-shadow: inset -1px 0 0 0 black;
  display: flex;
  flex-direction: column;
  flex: 1 1;
  padding-top: 1rem;
}

.App .Tile {
  background: #111;
  color: white;
  margin: 0 auto 1rem;
  padding: 5rem 0;
  text-align: center;
  width: 4rem;
}

.App .Footer {
  background: deepskyblue;
  min-height: 2rem;
}

<div class="App">
  <div class="Header">
    <div class="Player">Player</div>
    <div class="Player">Player</div>
    <div class="Player">Player</div>
    <div class="Player">Player</div>
  </div>
  <div class="Body">
    <div class="Column">
      <div class="Tile">0</div>
      <div class="Tile">1</div>
      <div class="Tile">2</div>
      <div class="Tile">3</div>
      <div class="Tile">4</div>
      <div class="Tile">5</div>
      <div class="Tile">6</div>
      <div class="Tile">7</div>
      <div class="Tile">8</div>
      <div class="Tile">9</div>
      <div class="Tile">10</div>
      <div class="Tile">11</div>
      <div class="Tile">12</div>
      <div class="Tile">13</div>
      <div class="Tile">14</div>
      <div class="Tile">15</div>
      <div class="Tile">16</div>
      <div class="Tile">17</div>
      <div class="Tile">18</div>
      <div class="Tile">19</div>
    </div>
    <div class="Column">
      <div class="Tile">0</div>
      <div class="Tile">1</div>
      <div class="Tile">2</div>
      <div class="Tile">3</div>
      <div class="Tile">4</div>
      <div class="Tile">5</div>
      <div class="Tile">6</div>
      <div class="Tile">7</div>
      <div class="Tile">8</div>
      <div class="Tile">9</div>
      <div class="Tile">10</div>
      <div class="Tile">11</div>
      <div class="Tile">12</div>
      <div class="Tile">13</div>
      <div class="Tile">14</div>
      <div class="Tile">15</div>
      <div class="Tile">16</div>
      <div class="Tile">17</div>
      <div class="Tile">18</div>
      <div class="Tile">19</div>
    </div>
    <div class="Column">
      <div class="Tile">0</div>
      <div class="Tile">1</div>
      <div class="Tile">2</div>
      <div class="Tile">3</div>
      <div class="Tile">4</div>
      <div class="Tile">5</div>
      <div class="Tile">6</div>
      <div class="Tile">7</div>
      <div class="Tile">8</div>
      <div class="Tile">9</div>
      <div class="Tile">10</div>
      <div class="Tile">11</div>
      <div class="Tile">12</div>
      <div class="Tile">13</div>
      <div class="Tile">14</div>
      <div class="Tile">15</div>
      <div class="Tile">16</div>
      <div class="Tile">17</div>
      <div class="Tile">18</div>
      <div class="Tile">19</div>
    </div>
    <div class="Column">
      <div class="Tile">0</div>
      <div class="Tile">1</div>
      <div class="Tile">2</div>
      <div class="Tile">3</div>
      <div class="Tile">4</div>
      <div class="Tile">5</div>
      <div class="Tile">6</div>
      <div class="Tile">7</div>
      <div class="Tile">8</div>
      <div class="Tile">9</div>
      <div class="Tile">10</div>
      <div class="Tile">11</div>
      <div class="Tile">12</div>
      <div class="Tile">13</div>
      <div class="Tile">14</div>
      <div class="Tile">15</div>
      <div class="Tile">16</div>
      <div class="Tile">17</div>
      <div class="Tile">18</div>
      <div class="Tile">19</div>
    </div>
  </div>
  <div class="Footer">Footer</div>
</div>

Answer 1

所以看起来您不希望各个列滚动。如果我误解了这个要求，那么解决方案很简单。

对您的代码进行以下调整：

.Body {
   background: orange;
   display: flex;
   flex-grow: 1;
   /* overflow-y: scroll; */
   min-height: 0; /* new */
}
    
.Column {
   overflow: auto;  /* new */
   background: gold;
   box-shadow: inset -1px 0 0 0 black;
   display: flex;
   flex-direction: column;
   flex: 1 1;
   padding-top: 1rem;
}

codepen

以下是对上述修改的解释：Why don't flex items shrink past content size?

---

如果您只想滚动 .Body 元素，请添加一个包装器：

<div class="Body">
   <section><!---- NEW ----->
     <div class="Column">
        <div class="Tile">0</div>
        <div class="Tile">1</div>
        <div class="Tile">2</div>
        <div class="Tile">3</div>
                . . .

.Body {
   background: orange;
   flex-grow: 1;
   overflow: auto;
}
        
section {
  display: flex;
}

codepen

以下是对上述修改的解释：Make background color extend into overflow area