Wie verwende ich Safe Center mit der Flexbox?

Question

Zentrierte Flexbox-Elemente können ein unerwünschtes Verhalten aufweisen when they overflow their container.

Für dieses Problem wurden mehrere nicht flexible Lösungen bereitgestellt, aber according to MDN gibt es einen safe Wert, der wie folgt beschrieben wird.

Wenn die Größe des Elements den Alignment-Container überläuft, wird das Element stattdessen so ausgerichtet, als ob der Alignment-Modus gestartet würde.

Es kann wie folgt verwendet werden.

align-items: safe center; 

Leider habe ich nicht in der Lage gewesen, keine Beispiele oder Diskussionen über diese zu finden, oder bestimmen, wie viel Browser-Unterstützung gibt es für sie ist.

Ich habe versucht, safein this CodePen zu verwenden. Es funktioniert jedoch nicht für mich. Die safe scheint ignoriert zu werden, oder das Containerelement ist nicht ordnungsgemäß formatiert.

Ich würde es wirklich schätzen, wenn jemand etwas Licht auf safe werfen könnte und ob und wie es verwendet werden kann, um das Überlaufproblem zu lösen, wie das CodePen Beispiel demonstriert.

Answer 1

Das safe Schlüsselwort ist immer noch ein working draft, und nicht viele (wenn überhaupt) Browser sie noch unterstützen, so die gleiche Wirkung, Cross-Browser zu erhalten, verwenden Sie auto margins für jetzt, die auf dem Flexpunkt gesetzt werden sollen.

Updated codepen

Hinweis, für die modal ‚s 50px Rand oben/unten zu kompensieren, verwenden padding auf modal-container.

.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; 
}