在引导容器中使用flexbox会使滚动条位于错误的位置

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

有谁能帮我把滚动条放到它应该在的地方,或者告诉我为什么我不能用我现在的方式来做,然后给我一个可行的解决方案?

以下是没有引导的原始工作示例:

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

<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/

<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>