html - 显示 :flex and scrolling inner divs

Question

https://jsfiddle.net/wqmm0kxb/5/

html:

<div class="full">
  <header><h1>header stuff</h1></header>
  <section>
    <div>
       {lots and lots of content}
    </div>
    <div>b</div>
    <div>c</div>
  </section>
</div>

CSS:

.full {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

   header {
      flex: 78px 0 0;
      background: #ececec;
      color: black;
      padding-left: 33px;
  }

  section {
    flex: auto 1 1;
    display: flex;
    align-items: stretch;

    > div {
      flex: auto 1 1;
      overflow-y: auto;
    }
  }

}

我的外部容器“.full”占据了屏幕的整个宽度和高度，并使用 display:flex 来确保标题 + 部分子项拉伸(stretch)以占据它们下方的所有空间。

现在，我想要的自然是标题占用 78px，部分占用 {full height - 78px} -- 但最好不要执行 calc 之类的操作。我希望能够在子部分的 div 中滚动，而不会影响其他 div 或整个页面。

这在 Chrome 中完美运行，但在 firefox、edge 或 ie 中打开我的 fiddle ，它没有按预期运行。 Section 获取 {lots and lots of content} 的高度，而不是只占用 '.full' 的剩余空间

我应该怎么做才能实现我期望的类似 Chrome 的布局？

Answer 1

同时为您的部分应用overflow-y:auto，这将解决 IE 和 Firefox 中的问题。

section {
  flex: auto 1 1;
  display: flex;
  align-items: stretch;
  overflow-y: auto;

  > div {
    flex: auto 1 1;
    overflow-y: auto;
  }
}

Fiddle DEMO