html - 在 bootstrap 容器中使用 flexbox 让我在错误的位置出现滚动条

Question

我希望我的页面具有 flexbox 布局，其中页眉和页脚位于同一位置，但内容填充屏幕的其余部分。但是，由于我的页面设置方式，我需要在我的代码的主要内容区域使用一个容器。这给我带来了滚动条的问题，它不在页面应有的位置，而是在容器的边缘。

谁能帮我把滚动条调到它应该在的位置，或者告诉我为什么我不能按照我现在的方式去做，并给我一个可行的解决方法？

这是没有 Bootstrap 的原始工作示例:

https://jsfiddle.net/SuperMelons/n2s9xrt0/

HTML:

<div class="mybox">
  <div class="myrow myheader">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="myrow mycontent">
    <p>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
    </p>
  </div>
  <div class="myrow myfooter">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

CSS:

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

.mybox {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.mybox .myrow {
  border: 1px dotted grey;
}

.mybox .myrow.myheader {
  flex: 0 1 auto;
}

.mybox .myrow.mycontent {
  display: flex;
  flex-flow: column;
  flex: 1 1 auto;
  overflow-y: auto;
}

.mybox .myrow.myfooter {
  flex: 0 1 40px;
}

这是因为引导容器而无法运行的示例:

https://jsfiddle.net/SuperMelons/2L5cbt8m/2/

带有 Bootstrap 的 HTML:

<div class="mybox">
  <div class="myrow myheader">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="myrow mycontent container">
    <p>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
      content<br>
    </p>
  </div>
  <div class="myrow myfooter">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Answer 1

你想要这样的东西吗？

https://jsfiddle.net/uykf3Lp8/2/

<div class="myrow mycontent">
    <div class="container">
        content
    </div>
</div>