Html 当滚动条出现时，Flexbox后台已损坏

我正在制作一个包含3行的flexbox列布局。顶行和底行是标题，其高度应与内容相符。中间一行应该增长或收缩。但是，它不应该收缩太多而溢出其内容-在这一点上，整个窗口应该滚动

<div class="flex-column" style="background-color: green; height: 100%">
  <div>
    Header
  </div>
  <div style="flex-shrink: 1; flex-grow: 1; overflow-y: scroll; overflow-x: hidden; min-height: 100px; background-color: red">
    <table>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
      <tr><td>Row</td></tr>
    </table>
  </div>
  <div>
    Footer
  </div>
</div>

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

标题
一行
一行
一行
一行
一行
一行
一行
一行
一行
一行
页脚
html，正文{
身高：100%；
填充：0px；
边际：0px；
}
.弹性行{
显示器：flex；
弯曲方向：行；
}
.柔性柱{
显示器：flex；
弯曲方向：立柱；
}

这个（Chrome 50）的问题是，当窗口垂直缩小，滚动条出现在窗口中（而不仅仅是内部），当向下滚动显示页脚时，页脚的绿色背景已损坏-它仅扩展到最初的范围

注:

• 如果无法达到内部div的最小高度，则整个窗口应滚动
• 我想一般来说，我不会在内部div本身上有最小高度，而是在它的一个孩子上
• 我遇到的真正问题实际上是外部div周围的框架（它是一个引导面板），而不是用作简单测试用例的背景色。请看图片

---

这是因为页脚没有背景，从容器溢出。flex column设置为高度：100%；实际上没什么问题：）在我的真实案例中，问题不在于背景颜色，而在于外部div的框架（它是一个引导面板）。在底部，它只是切断了通过页脚中间而不是围绕页脚的部分。我也可以这样写：这是因为页脚从容器溢出。flex column设置为高度：100%；实际上没什么问题：）（关于颜色删除）固定高度会使页脚溢出框。测试您的代码添加溢出：隐藏到外部div高度设置为50%以更直观这将在溢出时删除外部滚动条。我希望外部滚动条出现，但页脚在滚动时看起来正确。为了理智起见，了解CSS级别1

float

和

width

如何工作并转储引导；Bootstrap是由服务器端人员创建的客户端框架。我见过的每个网站都在

class

属性上使用它。当您看到这样一个问题时，它意味着您已将父元素用于代码目的，而不是样式设置，

height

和

overflow

将发挥作用。祝你好运这是因为页脚没有背景，并且从容器溢出。flex column设置为高度：100%；实际上没什么问题：）在我的真实案例中，问题不在于背景颜色，而在于外部div的框架（它是一个引导面板）。在底部，它只是切断了通过页脚中间而不是围绕页脚的部分。我也可以这样写：这是因为页脚从容器溢出。flex column设置为高度：100%；实际上没什么问题：）（关于颜色删除）固定高度会使页脚溢出框。测试您的代码添加溢出：隐藏到外部div高度设置为50%以更直观这将在溢出时删除外部滚动条。我希望外部滚动条出现，但页脚在滚动时看起来正确。为了理智起见，了解CSS级别1

float

和

width

如何工作并转储引导；Bootstrap是由服务器端人员创建的客户端框架。我见过的每个网站都在

class

属性上使用它。当您看到这样一个问题时，它意味着您已将父元素用于代码目的，而不是样式设置，

height

和

overflow

将发挥作用。祝你好运