css - ¿Cómo usar el centro seguro con flexbox?

css3

Question

Los elementos centrados de flexbox pueden tener un comportamiento no deseado cuando desbordan su contenedor .

Se han proporcionado varias soluciones no flexibles para este problema, pero según MDN hay un valor safe que se describe a continuación.

Si el tamaño del elemento desborda el contenedor de alineación, el elemento se alineará como si se iniciara el modo de alineación.

Se puede usar de la siguiente manera.

align-items: safe center;

Desafortunadamente, no he podido encontrar ningún ejemplo o discusión de esto, ni determinar cuánto soporte de navegador hay para ello.

He intentado usar la safe en este CodePen . Sin embargo, no funciona para mí. Parece que se ignora la safe , o tal vez el elemento contenedor tiene un estilo incorrecto.

Realmente agradecería si alguien pudiera arrojar algo de luz sobre la safe y si se puede usar y cómo se puede usar para resolver el problema de desbordamiento, como lo demuestra el ejemplo de CodePen.

Answer 1

La palabra clave safe sigue siendo un borrador funcional , y aún no hay muchos navegadores (si los hay) que lo admitan, por lo que para obtener el mismo efecto, navegador cruzado, use márgenes automáticos por ahora, que deberían configurarse en el elemento flexible.

Codepen actualizado

Tenga en cuenta que para compensar el margen superior / inferior de 50 píxeles del modal , use padding en 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;
}