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

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

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

以下是不带引导的原始工作示例：

HTML:

以下是由于引导容器而无法工作的示例：

带引导的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>

---

你想要这样的想法吗

---

很确定这在CSS中是不可能的。broswer在有溢出的地方添加滚动条。由于页面不会溢出，因此页面上不会出现滚动条。JS可能会做些什么。一个简单的修复方法是在mybox规则中设置宽度：100%，这也避免了固定宽度的引导媒体查询在特定屏幕大小下只使用代码进行回答，而不解释您所做的事情以及它为什么工作，这不是一个好的答案。。。不需要额外的包装，你可以在我的回答中看到

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

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

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