html - guia - inline flex

Problema de representación de desplazamiento vertical en Flexbox en Firefox

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Por qué el elemento flexible no se contrae pasado el tamaño del contenido? 1 respuesta

Deseo incluir un elemento flexible dentro del padre para que no se derrame fuera del padre. Solo el elemento flexible debe tener una barra de desplazamiento (si es necesario).

Mi estilo funciona bien en Chrome e IE11, pero no en Firefox. Sospecho que hay una diferencia en la interpretación del estilo de flex-basis establecido en #wrapper , pero no puedo entender por qué Firefox lo interpreta de manera diferente.

Aquí está el renderizado deseado como se ve en Chrome:

Y esto es lo que sucede en Firefox:

Podría aplicar un arreglo de "cinta adhesiva" agregando #left { height: calc(100vh - 50px); } #left { height: calc(100vh - 50px); } , pero preferiría identificar la inconsistencia real si es posible.

body, html, h1 {
  padding: 0;
  margin: 0;
}
header {
  background-color: rgba(0, 255, 255, 0.2);
  height: 50px;
}
#main {
  height: 100vh;
  background-color: rgba(0, 255, 255, 0.1);
  display: flex;
  flex-flow: column;
}
#wrapper {
  display: flex;
  flex-grow: 2;
  flex-basis: 0%;
}
#left {
  overflow-y: scroll;
  background-color: rgba(0, 255, 255, 0.2);
  width: 30%;
}
.box {
  margin: 5px 0;
  height: 50px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

<div id="main">
  <header>
    <h1>Header</h1>
  </header>
  <div id="wrapper">
    <div id="left">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</div>

Answer 1

Esto tiene que ver con el algoritmo de tamaño mínimo implícito de la especificación flexbox.

Este es un error de Firefox .

Añadiendo min-width: 0; min-height: 0 min-width: 0; min-height: 0 to #wrapper parece hacer el truco:

#wrapper {
    display: flex;
    flex-grow: 2;
    flex-basis: 0%;
    min-height: 0; /* NEW */
    min-width: 0; /* NEW */
}

MANIFESTACIÓN

Respuesta original a continuación

Actualmente tiene overflow-y: scroll aplicado a #left .

Si también aplica overflow-y: scroll a #wrapper , el scroll vertical se inicia en Firefox.

En cuanto a por qué Firefox interpreta el código de forma diferente a Chrome no puedo decir. Los motores de renderizado tienen sus diferencias. Hace poco abordé otro problema de interpretación de flexbox entre IE11 y Chrome :

Más información:

• Error 1043520 - (minsizeauto-fallout) Error de seguimiento para el rompimiento de contenido web debido al nuevo comportamiento "min-width: auto" / "min-height: auto" en los artículos flexibles

• Error 570036 - La caja flexible no permite el desbordamiento del desplazamiento de elementos secundarios sin marcado adicional

• DEMO: http://jsfiddle.net/seqgz8qv/ (scroll funciona en FF)

• Desplazar no funciona con CSS3 Flex Box en Firefox

• Flexbox y scroll vertical en una aplicación de altura completa usando NEWER api flexbox

• Desplazamiento de un flexbox con contenido desbordante