html - IE flexbox居中布局忽略高度

Question

我有一个用 flexbox 制作的布局。在 Safari/Chrome/Firefox/Opera 中运行良好，唯一的问题是 Internet Explorer(版本 <= 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 会降低标题的高度(应该固定)并且不会留下任何填充:

而所有其他浏览器都按照 &__content CSS 规则中指定的方式保留填充:

我该如何解决这个问题？

Answer 1

header 将其 flex-shrink 设置为 1，这允许它收缩。

将其更改为 flex: 0 0 auto，它也将在 IE 中工作。

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

---

根据评论更新

如果内容会超过其父项的高度 (app__content)，并且父项使用 align-items: center;，则内容将为 overflow at both top and bottom ，这是设计使然。

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