No se puede desplazar a la parte superior del elemento flexible que se desborda del contenedor

Entonces, al intentar hacer un modal útil usando flexbox, encontré lo que parece ser un problema del navegador y me pregunto si existe una solución o solución alternativa conocida, o ideas sobre cómo resolverlo.

Lo que intento resolver tiene dos aspectos. Primero, obtener la ventana modal centrada verticalmente, que funciona como se esperaba. El segundo es hacer que la ventana modal se desplace - externamente, por lo que toda la ventana modal se desplaza, no el contenido dentro de ella (esto es para que pueda tener menús desplegables y otros elementos de la interfaz de usuario que pueden extenderse fuera de los límites del modal - como un selector de fecha personalizado, etc.)

Sin embargo, al combinar el centrado vertical con las barras de desplazamiento, la parte superior del modal puede volverse inaccesible a medida que comienza a desbordarse. En el ejemplo anterior, puede cambiar el tamaño para forzar el desbordamiento y, al hacerlo, le permite desplazarse hasta la parte inferior del modal, pero no hacia la parte superior (el primer párrafo está cortado).

Aquí está el enlace al código de ejemplo (muy simplificado)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

Esto afecta (actual) Firefox, Safari, Chrome y Opera. Curiosamente, se comporta correctamente en IE10 si comenta en el vendedor de IE10 con el prefijo css. No me molesté en probarlo en IE11 todavía, pero supongo que el comportamiento coincide con el de IE10. .

Cualquier idea sería buena. Los enlaces a problemas conocidos o el razonamiento detrás de este comportamiento también serían útiles.

El problema

Flexbox facilita el centrado.

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 indica en la pregunta, cuando el artículo flexible se desborda del contenedor, la parte superior se vuelve inaccesible.

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

Aquí hay un ejemplo con un contenedor LTR que tiene justify-content: centery tres elementos flexibles:

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

Solución # 1

Para solucionar este problema, use 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 de él.

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

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

Use este código en el artículo flexible:

.flex-item {
    margin: auto;
}

Demo 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 cajas CSS :

4.4. Desbordamiento Orientación: el safey unsafepalabras clave y 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 causar pérdida de datos: por ejemplo, si el contenido de una barra lateral está centrado, cuando se desbordan, pueden enviar parte de sus cuadros más allá del borde de inicio de la ventana gráfica, que no se puede desplazar a .

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 la pérdida de datos, mientras que la safealineación cambia el modo de alineación en situaciones de desbordamiento en un intento por evitar la pérdida de datos.

El comportamiento predeterminado es contener el tema de la alineación dentro del área desplazable, aunque en el momento de escribir este artículo, esta función 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 del [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 distribución de cajas, no solo en flex. Entonces, en el extracto de la especificación anterior, los términos entre corchetes en realidad dicen "sujeto de alineación", "contenedor de alineación" y " start". Usé términos específicos de flex para mantener el enfoque 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 hacen un centrado "verdadero", a diferencia de otros métodos de centrado en CSS. Esto significa que los elementos flexibles permanecerán centrados, incluso si se desbordan del 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 el 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 usar márgenes para lograr el centrado, ya que responderán de una manera "segura" y dejarán de centrarse si se desbordan.

En lugar de usar 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 haya espacio sobrante y cambiando a la alineación normal cuando no.

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

Bueno, como diría la Ley de Murphy, la lectura que hice después de publicar esta pregunta dio como resultado algunos resultados, no completamente resueltos, pero de alguna manera útiles.

Jugué un poco con la altura mínima antes de publicar, pero no estaba al tanto de las restricciones de tamaño intrínsecas que son bastante nuevas para la especificación.

http://caniuse.com/#feat=intrinsic-width

Agregar un min-height: min-contental área de flexbox resuelve el problema en Chrome, y con los prefijos del proveedor también corrige Opera y Safari, aunque Firefox sigue sin resolverse.

min-height: -moz-min-content; // not implemented
min-height: -webkit-min-content // works for opera and safari
min-height: min-content // works for chrome

Todavía estoy buscando ideas sobre Firefox y otras posibles soluciones.

Me las arreglé para lograr esto con solo 3 contenedores. El truco consiste en separar el contenedor flexbox del contenedor que controla el desplazamiento. Por último, coloque todo en un contenedor de raíz para centrarlo todo. Estos son los estilos esenciales para crear el efecto:

CSS:

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

HTML:

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

He creado una demostración aquí: https://jsfiddle.net/r5jxtgba/14/

Creo que encontré una solución. Funciona con mucho texto y poco texto . No necesita especificar el ancho de nada, y debería funcionar en IE8.

.wrap1 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.wrap2 {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.wrap3 {
  vertical-align: middle;
  display: table-cell;
}
.wrap4 {
  margin: 10px;
}
.dialog {
  text-align: left;
  background-color: white;
  padding: 5px;
  border-radius: 3px;
  margin: auto;
  display: inline-block;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}

<div class="wrap1">
  <div class="wrap2">
    <div class="wrap3">
      <div class="wrap4">
        <div class="dialog">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Según MDN, el safevalor ahora se puede proporcionar a propiedades como align-itemsy justify-content. Se describe de la siguiente manera:

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

Por lo tanto, podría usarse de la siguiente manera.

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

Sin embargo, no está claro cuánta compatibilidad con el navegador tiene, no pude encontrar ningún ejemplo de su uso y yo mismo he tenido algunos problemas. Mencionarlo aquí para llamar más la atención sobre él.

También logré hacerlo usando un contenedor adicional.

HTML

<div class="modal-container">
  <div class="modal">
    <div class="content-container">
       <div class="content">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
  </div>  
</div>

CSS

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #aaa;
  height: 80%;
  width: 90%;
}

.content-container {
  background-color: blue;
  max-height: 100%;
  overflow: auto;
  padding:0;
}

.content {
  display: flex;
  background-color: red;
  padding: 5px;
  width: 900px;
  height: 300px;
}

en jsfiddle> https://jsfiddle.net/Nash171/cpf4weq5/

cambiar los valores de ancho / alto de contenido y ver

2 Método Container Flex con respaldo de tabla probado IE8-9, flex funciona en IE10,11. Editar: editado para garantizar el centrado vertical cuando el contenido es mínimo, se agregó soporte heredado.

El problema se debe a que la altura se hereda del tamaño de la ventana gráfica, lo que hace que los niños se desborden, como respondió Michael. https://stackoverflow.com/a/33455342/3500688

algo más simple y use flex para mantener el diseño dentro del contenedor emergente (contenido):

#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 100vh;
background-color: rgba(0,0,0,.25);
margin: auto;
overflow: auto;
height: 100%;
bottom: 0;
display: flex;
align-items: flex-start;
box-sizing:border-box;
padding:2em 20px;
}
.container {
background-color: #fff;
margin: auto;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
/* width: 100%; */
max-width: 500px;
padding: 10px;
    /* display: flex; */
    /* flex-wrap: wrap; */
}
		<!--[if lt IE 10]>
<style>
	  #popup {
			display: table;
			width:100%;
		}
		.iewrapper {
			display: table-cell;
			vertical-align: middle;
		}
	</style>
	<![endif]-->

<div id="popup">
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
    <div class="container">
        <p class="p3">Test</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
</div>