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的高度時，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; ，內容將同時在頂部和底部溢出 ，並且設計使然。

要解決此問題，請刪除align-items: center並在內容上使用margin: auto 0 。