No puedo desplazarme a la parte superior del elemento flexible cuyo contenedor está desbordado

El problema

Flexbox hace que centrar sea muy fácil.

Simplemente aplicando align-items: centery justify-content: centeral contenedor flexible, sus artículos flexibles estarán centrados vertical y horizontalmente.

Sin embargo, existe un problema con este método cuando el elemento flexible es más grande que el contenedor flexible.

Como se señaló en la pregunta, cuando el elemento flexible desborda el contenedor, la parte superior se vuelve inaccesible.

Para el desbordamiento horizontal, la sección izquierda se vuelve inaccesible (o sección derecha, en lenguajes RTL).

A continuación se muestra un ejemplo con un contenedor LTR que tiene justify-content: centertres elementos flexibles:

Consulte la parte inferior de esta respuesta para obtener una explicación de este comportamiento.

Solución #1

Para solucionar este problema, utilice los márgenes automáticos de Flexbox , en lugar de justify-content.

Con automárgenes, un elemento flexible desbordado se puede centrar vertical y horizontalmente sin perder el acceso a ninguna parte del mismo.

Entonces, en lugar de este código en el contenedor flexible:

#flex-container {
    align-items: center;
    justify-content: center;
}

Utilice este código en el elemento flexible:

.flex-item {
    margin: auto;
}

Demostración revisada

Solución n.º 2 (aún no implementada en la mayoría de los navegadores)

Agregue el safevalor a su regla de alineación de palabras clave, así:

justify-content: safe center

o

align-self: safe center

De la especificación del módulo de alineación de caja CSS :

4.4. Alineación de desbordamiento: las palabras clave safey unsafey los límites de seguridad de desplazamiento

Cuando el [elemento flexible] es más grande que el [contenedor flexible], se desbordará. Algunos modos de alineación, si se respetan en esta situación, pueden provocar pérdida de datos: por ejemplo, si el contenido de una barra lateral está centrado, cuando se desborda puede enviar parte de sus cuadros más allá del borde inicial de la ventana gráfica, al que no se puede desplazar. .

Para controlar esta situación, se puede especificar explícitamente un modo de alineación de desbordamiento . UnsafeLa alineación respeta el modo de alineación especificado en situaciones de desbordamiento, incluso si causa pérdida de datos, mientras que safela alineación cambia el modo de alineación en situaciones de desbordamiento en un intento de evitar la pérdida de datos.

El comportamiento predeterminado es contener el tema de alineación dentro del área desplazable, aunque en el momento de escribir este artículo esta característica de seguridad aún no está implementada.

safe

Si el tamaño del [elemento flexible] desborda el [contenedor flexible], el [elemento flexible] se alinea como si el modo de alineación fuera [ flex-start].

unsafe

Independientemente de los tamaños relativos de [elemento flexible] y [contenedor flexible], se respeta el valor de alineación dado.

Nota: El módulo de alineación de cajas se utiliza en varios modelos de diseño de cajas, no solo en flex. Entonces, en el extracto de especificaciones anterior, los términos entre paréntesis en realidad dicen "asunto de alineación", "contenedor de alineación" y " start". Utilicé términos específicos de flex para mantener el foco en este problema en particular.

Explicación de la limitación de desplazamiento de MDN:

Consideraciones sobre elementos flexibles

Las propiedades de alineación de Flexbox realizan un centrado "verdadero", a diferencia de otros métodos de centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si desbordan el contenedor flexible.

Sin embargo, esto a veces puede ser problemático si se desbordan más allá del borde superior de la página o del borde izquierdo [...], ya que no puede desplazarse a esa área, incluso si hay contenido allí.

En una versión futura, las propiedades de alineación se ampliarán para tener también una opción "segura".

Por ahora, si esto le preocupa, puede utilizar márgenes para lograr el centrado, ya que responderán de forma "segura" y dejarán de centrarse si se desbordan.

En lugar de utilizar las align-propiedades, simplemente coloque automárgenes en los elementos flexibles que desea centrar.

En lugar de las justify-propiedades, coloque márgenes automáticos en los bordes exteriores del primer y último elemento flexible en el contenedor flexible.

Los automárgenes se "flexionarán" y asumirán el espacio sobrante, centrando los elementos flexibles cuando quede espacio sobrante y cambiando a la alineación normal cuando no.

Sin embargo, si está intentando reemplazar justify-contentcon centrado basado en márgenes en una caja flexible de varias líneas, probablemente no tenga suerte, ya que necesita colocar los márgenes en el primer y último elemento flexible de cada línea. A menos que pueda predecir de antemano qué elementos terminarán en qué línea, no podrá utilizar de manera confiable el centrado basado en márgenes en el eje principal para reemplazar la justify-contentpropiedad.

Oct 31 '2015 18:10 Michael Benjamin