Safari flexbox＆margin-top：動的コンテンツを含む自動

Question

フレックスボックスレイアウトを使用すると、メニューが上部にあり、少し著作権フッターがあり、margin-top: auto;メソッドを使用して左の列ナビゲーションがあります。ページはReact App内にあり、最初のペイント後にコンポーネントをAPIに呼び出してデータを取得します。ロードされると、コンテンツ領域はビューポートを越えて展開されます。私は100vhを使用していないので、Chromeのような文書の残りの部分に展開すると期待しています& Firefoxはそうです。代わりに、著作権とナビゲーションは、ページの残りの部分を表示するためにスクロールするときにビューポートの高さを維持します。

現在のところFirefox & Chromeでは動作しますが、Safariでは動作しません。おそらく私はトラブルシューティングをしていたので、少し余分なCSSは両親に何もしていません。

html, body { 
    height: 100%; 
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch; 
} 

.app { 
    max-width: 100vw; 
    height: 100%; 
    display: flex; 
    align-content: stretch; 

    .AppContainer { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: nowrap; 
    justify-content: flex-start; 
    align-items: flex-start; 
    align-content: stretch; 
    height: 100%; 
    width: 100vw; 

    .navigation-container { 
     display: flex; 
     flex-direction: column; 
     flex-wrap: wrap; 
     height: 100%; 

     .navigation { 
     width: 220px; 
     margin-bottom: 40px; 
     } 

     .footer { 
     margin-top: auto; 
     color: #CCC; 
     font-size: 1.4rem; 
     line-height: 1.6rem; 
     padding: 0 20px 20px; 
     } 
    } 
    } 
} 

Answer 1

は.footerに.navigation-containerとposition: absoluteにposition: relativeを追加しました。 Safariにのみ影響を与えているようです。他のブラウザは、この場合の位置付けのための追加的な特性を考慮することなく、注意を払うことができる。