IE flexbox居中布局忽略高度

Question

我有一个用flexbox制作的布局。在Safari / Chrome / Firefox / Opera中，它运行正常，唯一的问题是Internet Explorer（版本＆lt; = 11）。

我想要的布局如下：

*-----------------*
| HEADER          |
*-----------------*
|                 |
|  *-----------*  |
|  |           |  |
|  |           |  |
|  *-----------*  |
|                 |
*-----------------*

内容始终垂直和水平居中。这就是我实现这个目标的方式：

  .app {
      background-color: $white;
      display: flex;
      flex-direction: column;
      height: 100vh;

      &__header {
          flex: 0 1 auto;
          height: 50px;
      }

      &__content {
          display: flex;
          align-items: center;

          flex: 1 1 auto;                     /*  changed flex-shrink to 1  */
          display: flex;
          align-items: flex-start;            /*  IE fix  */
          overflow-y: auto;
          padding: 20px 0 20px 0;
      }
  }

问题是，当内容的高度大于窗口的高度时，IE会降低标题的高度（应该是固定的）并且不会留下任何填充：

而其他所有浏览器都按照＆amp; __内容CSS规则中的指定保留填充：

我该如何解决这个问题？

Answer 1

header将flex-shrink设置为1，这样可以缩小。{/ p>

将其更改为flex: 0 0 auto，它也可以在IE中使用。

注意，使用flex-basis作为高度是灵活列项目的首选方式，flex: 0 0 50px

根据评论更新

如果内容超过其父级（app__content）且父级使用align-items: center;，则内容将overflow at both top and bottom，并且设计完成。

要解决此类问题，请删除align-items: center并在内容上使用margin: auto 0。