フレックスボックスで安全センターを使用するには？

Question

中央フレックスボックスのアイテムは、望ましくない動作をする可能性がありますwhen they overflow their container。

この問題では、いくつかの非フレックスソリューションが提供されていますが、according to MDNの値はsafeです。この値は次のとおりです。

アイテムのサイズがアライメントコンテナをオーバーフローする場合、アイテムはアライメントモードが開始されたかのように、代わりにアライメントされます。

以下のように使用できます。

align-items: safe center; 

残念ながら、私はこの任意の例や議論を見つける、またはそれのためにそこにあるどのくらいのブラウザのサポートを決定することができていません。

私はsafein this CodePenを使用しようとしました。しかし、それは私のためには機能しません。 safeは無視されているようですが、おそらくコンテナ要素のスタイルが不適切です。

誰かがsafeについて光を当てることができ、CodePenの例で示されているようにオーバーフローの問題を解決するために使用できるかどうか、またそれをどのように使用できるのか本当に感謝します。

Answer 1

キーワードはまだworking draftであり、多くのブラウザがまだサポートしていないため、クロスブラウザと同じ効果を得るには、フレックスアイテムに設定するauto marginsを使用してください。

Updated codepen

modalさんは50pxの、トップ/ボトムマージンを補償するための注意、modal-containerにpaddingを使用しています。

.modal-container 
{ 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: flex-start;    /* changed */ 
    position: fixed; 
    width: 100vw; 
    height: 100vh; 
    overflow-y: scroll; 
    padding: 50px 0;      /* added */ 
    box-sizing: border-box;     /* added */ 
} 
.modal-container > #modal 
{ 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    margin: auto 0;       /* changed */ 
    padding: 12px; 
    width: 50%; 
    background-color: #333; 
    cursor: pointer; 
}