CSS FlexBox Problema en Firefox v36 y mayor [duplicado] -- ss campo con firefox campo con flexbox camp Relacionados El problema

CSS Flexbox Issue in Firefox v36 and Greater [duplicate]


0
vote

problema

Español
Esta pregunta ya tiene respuestas aquí :
¿Cómo puedo obtener FF 33.x ¿Comportamiento de FlexBox en FF 34.x? [duplicado] (3 respuestas)
Cerrado hace 6 años .

Estoy intentando usar CSS FlexBox (Pantalla: FLEX) para tomar la altura restante de una ventana. También quiero desplazamiento disponible ... tal vez he estado haciendo esto mal, pero he estado buscando tanto tiempo que otras opciones me han eludido.

La idea es que hay un contenedor fijo. Dentro de ese contenedor fijo es una caja flexible que ocupa el 100% de la altura. Agrego artículos a la caja de Flex que se apilan en una columna. El último elemento que agrego (envoltorio contenedor) tiene contenido dinámico en el interior que reemplazará HTML a través de llamadas AJAX (de lo contrario, solo movería la barra de acción fuera de la envoltura y se hará con él). Este envoltorio de contenido también es un contenedor flexible (así como un elemento flexible) y se establece para crecer y encogerse con la altura de la ventana. Se supone que el último elemento de este contenedor flexible permite el desplazamiento a medida que la ventana se encoge.

Demo aquí .

  <!-- The fixed container --> <div class="fixed">     <!-- The first flex container - direction: column -->     <div class="outer">         <div class="some-flex-item"></div>         <div class="some-flex-item"></div>         <!-- Grow and shrink with 100% of height -->         <div class="container-wrapper">             <!-- inner HTML is dynamic -->             <!-- flex: 0 0 auto -->             <div class="action-bar"></div>              <!-- Want this div to take up remaining height of window                  and have overflow-y scrolling -->             <div class="container">                 ...             </div>         </div>     </div> </div>   

Parece que funciona en IE 10+, Chrome, pero Firefox no agrega la barra de desplazamiento porque la altura de la envoltura del contenedor se convierte en un poco deunciado debido al contenido interior. Debería mencionar que una versión anterior de Firefox se muestra correctamente (creo ~ 33), pero las versiones actualizadas no lo hacen.

Encontré una solución alternativa donde realizo la posición del contenedor interior: relativo y luego envuelva los contenidos internos de los que se encuentran en un DIV con colocación absoluta establecida en 0 para la parte superior, izquierda, abajo, derecha. ejemplo aquí . No me gusta esto, ya que parece derrotar el propósito del diseño de FlexBox. ¿Hay alguna manera de obtener este concepto para jugar muy bien a través del navegador sin tener que hacer hacks de marcado?

Original en ingles

I am attempting to use CSS Flexbox (display: flex) to take up the remaining height of a window. I also want scrolling available... Maybe I have been going about this wrong, but have been looking for so long that other options have eluded me.

The idea is that there is a fixed container. Within that fixed container is a flexbox that takes up 100% of the height. I add items to the flex box that stack in a column. The last item I add (container-wrapper) has dynamic content inside that will replace HTML through AJAX calls (else I would just move the action-bar outside the wrapper and be done with it). This content wrapper is also a flex container (as well as a flex item) and set to grow and shrink with the height of the window. The last item of this flex container is supposed to allow scrolling as the window shrinks.

Demo here.

<!-- The fixed container --> <div class="fixed">     <!-- The first flex container - direction: column -->     <div class="outer">         <div class="some-flex-item"></div>         <div class="some-flex-item"></div>         <!-- Grow and shrink with 100% of height -->         <div class="container-wrapper">             <!-- inner HTML is dynamic -->             <!-- flex: 0 0 auto -->             <div class="action-bar"></div>              <!-- Want this div to take up remaining height of window                  and have overflow-y scrolling -->             <div class="container">                 ...             </div>         </div>     </div> </div> 

Seems to work in IE 10+, Chrome, but Firefox doesn't add the scrollbar because container-wrapper's height grows unbounded due to the content inside. I should mention that an older version of Firefox displayed correctly (I think ~33), but updated versions do not.

I found a workaround where I make inner container position: relative and then wrap the inner contents of that in a div with absolute positioning set to 0 for top, left, bottom, right. Example here. I don't like this as it seems to defeat the purpose of flexbox layout. Is there any way to get this concept to play nicely across browser without having to do markup hacks?

        

Lista de respuestas

6
 
vote
vote
La mejor respuesta
 

Añadir esto:

  .container-wrapper {     min-height: 0; }    

  html {    box-sizing: border-box;  }  *, *:before, *:after {    box-sizing: inherit;  }  html, body {    margin: 0;    height: 100%;  }  .fixed {    position: fixed;    top: 60px;    right: 0;    bottom: 0;    width: 100%;    max-width: 400px;  }  .outer {    border: 1px solid black;    height: 100%;    display: -ms-flexbox;    display: flex;    -ms-flex-direction: column;    flex-direction: column;  }  .outer > * {    -ms-flex: 0 0 auto;    flex: 0 0 auto;  }  .container-wrapper {    -ms-flex: 1 1 100%;    flex: 1 1 100%;    display: -ms-flexbox;    display: flex;    -ms-flex-direction: column;    flex-direction: column;    min-height: 0;  }  .action-bar {    -ms-flex: 0 0 auto;    flex: 0 0 auto;    border-top: 1px solid silver;    border-bottom: 1px solid silver;    padding: 20px;    text-align: right;  }  .container {    -ms-flex: 1 1 100%;    flex: 1 1 100%;    overflow-y: auto;  }  .list {    display: -ms-flexbox;    display: flex;    padding-top: 10px;    padding-bottom: 10px;    border: 1px solid aqua;  }  .display-name {    -ms-flex: 1 1 100%;    flex: 1 1 100%;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;    padding-right: 8px;  }  .display-date {    -ms-flex: 0 0 auto;    flex: 0 0 auto;  } 
  <div class="fixed">    <div class="outer">      <div>        <p>Title</p>      </div>      <!-- The inner contents of container-wrapper is dynamic so I cannot  simply move the action-bar item outside -->      <div class="container-wrapper">        <div class="action-bar">          <button>I don't do anything but occupy space</button>        </div>        <!-- Firefox allows this element to grow beyond the remaining space of the container-wrapper  thus expanding the height of the container-wrapper and not allowing scroll -->        <div class="container">          <div class="list">            <div class="display-name">              Display Name            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>          <div class="list">            <div class="display-name">              Really long name that should be truncated. I don't know            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>          <div class="list">            <div class="display-name">              Display Name            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>          <div class="list">            <div class="display-name">              Display Name            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>          <div class="list">            <div class="display-name">              Display Name            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>        </div>        </div>    </div>  </div>  

Lo necesita porque el módulo FlexBox cambia el valor inicial de min-height :

4.5 Tamaño mínimo implícito de los elementos flexibles

Proporcionar un tamaño mínimo predeterminado más razonable para elementos flexibles , Esta especificación introduce una nueva Auto Valor como el inicial valor de la Min-width y min-height Propiedades definidas en CSS 2.1.

 

Add this:

.container-wrapper {     min-height: 0; } 

html {    box-sizing: border-box;  }  *, *:before, *:after {    box-sizing: inherit;  }  html, body {    margin: 0;    height: 100%;  }  .fixed {    position: fixed;    top: 60px;    right: 0;    bottom: 0;    width: 100%;    max-width: 400px;  }  .outer {    border: 1px solid black;    height: 100%;    display: -ms-flexbox;    display: flex;    -ms-flex-direction: column;    flex-direction: column;  }  .outer > * {    -ms-flex: 0 0 auto;    flex: 0 0 auto;  }  .container-wrapper {    -ms-flex: 1 1 100%;    flex: 1 1 100%;    display: -ms-flexbox;    display: flex;    -ms-flex-direction: column;    flex-direction: column;    min-height: 0;  }  .action-bar {    -ms-flex: 0 0 auto;    flex: 0 0 auto;    border-top: 1px solid silver;    border-bottom: 1px solid silver;    padding: 20px;    text-align: right;  }  .container {    -ms-flex: 1 1 100%;    flex: 1 1 100%;    overflow-y: auto;  }  .list {    display: -ms-flexbox;    display: flex;    padding-top: 10px;    padding-bottom: 10px;    border: 1px solid aqua;  }  .display-name {    -ms-flex: 1 1 100%;    flex: 1 1 100%;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;    padding-right: 8px;  }  .display-date {    -ms-flex: 0 0 auto;    flex: 0 0 auto;  }
<div class="fixed">    <div class="outer">      <div>        <p>Title</p>      </div>      <!-- The inner contents of container-wrapper is dynamic so I cannot  simply move the action-bar item outside -->      <div class="container-wrapper">        <div class="action-bar">          <button>I don't do anything but occupy space</button>        </div>        <!-- Firefox allows this element to grow beyond the remaining space of the container-wrapper  thus expanding the height of the container-wrapper and not allowing scroll -->        <div class="container">          <div class="list">            <div class="display-name">              Display Name            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>          <div class="list">            <div class="display-name">              Really long name that should be truncated. I don't know            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>          <div class="list">            <div class="display-name">              Display Name            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>          <div class="list">            <div class="display-name">              Display Name            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>          <div class="list">            <div class="display-name">              Display Name            </div>            <div class="display-date">              Mar 31, 2015            </div>          </div>        </div>        </div>    </div>  </div>

You need it because the Flexbox module changes the initial value of min-height:

4.5 Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

 
 

Relacionados problema

0  Mostrar DIV2 bajo DIV1 en los navegadores Mobil - CSS: FLEX,  ( Show div2 under div1 on mobil browsers css flex ) 
Tengo dos div, que se muestra correctamente en la computadora de destopos. Pero en el navegador móvil no se ven bien. ¿Cómo puedo obtener DIV2 para estar ba...

3  Bloque en línea en una caja flexible en la dirección de la columna  ( Inline block in a flexbox in the column direction ) 
¿Cómo hago C, D, e que tienen un display: inline-block ocupar solo tanto espacio como necesitan para adaptarse al texto dentro de ellos y pueden aparecer ju...

2  ¿Por qué este pie de página de FlexBox no funciona en un dispositivo móvil?  ( Why doesnt this flexbox footer work on a mobile device ) 
Estoy practicando usando FlexBox para construir pies. El pie de página que estoy construyendo en este momento funciona como se esperaba en un escritorio, pero...

2  Columna de albañilería CSS / diseño de cuadrícula [cerrado]  ( Css masonry column grid layout ) 
cerrado . Esta pregunta debe ser más enfocado . Actualmente no está aceptando respuestas. ...

3  Valores faltantes en la propiedad de taquigrafía  ( Missing values in shorthand property ) 
citando css 2.2 especificaciones : Cuando los valores se omiten de una forma de taquigrafía, cada propiedad "Falta" Se le asigna su valor inicial (consu...

0  FlexBox bajo desbordamiento que no toma ancho completo  ( Flexbox under overflow not taking full width ) 
He simplificado mi HTML / CSS en una jsfiddle de lo que estoy tratando de lograr sin éxito. No puedo hacer que el .problem tome el ancho completo. El co...

-2  Elementos de lista de estilo con FlexBox  ( Styling list elements with flexbox ) 
por favor ayúdame. Necesito 3 li Elemento como en la imagen aquellos que descargué (icono + texto), pero tienen un comportamiento incorrecto. Necesito como ...

0  "Justificar contenido" en mi lista Flex sin ordenar no funciona  ( Justify content on my flex unordered list is not working ) 
Tengo un simple pie de página de FlexBox. Cuando la pantalla se obtiene por debajo de 580px, el diseño cambia como puede ver a continuación. Tengo dos cuest...

149  Diseño de albañilería solo CSS  ( Css only masonry layout ) 
Necesito implementar un diseño de mampostería bastante escandalizado. Sin embargo, por varias razones, no quiero usar JavaScript para hacerlo. Parámetros...

0  ¿Cómo hago un reflejo de FlexBox?  ( How do i make a flexbox responsive ) 
Hola. Estoy tratando de hacer que mi clase nav_list no responde. He utilizado el siguiente código, pero cuando prueba el navegador, no responde, se recorta ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos