Articles of flexbox

¿Por qué Firefox no respeta la altura de div en flexión, pero Chrome sí?

Esto se ilustra mejor con un simple ejemplo. Tengo un contenedor con display: flex y flex-direction: column , con una div única dentro con height: 300px y flex: 1 . Chrome representa el div nested en 300px de altura, pero Firefox lo representa como una sola línea. ¿Es esto solo un matiz entre la implementación […]

Haga que dos elementos tengan la misma altura, uno con una barra de desplazamiento vertical

Estoy tratando de hacer que dos elementos div hermanos tengan la misma altura. El de ellos tiene un overflow-y y una barra de desplazamiento con contenido de altura variable. El div principal tiene contenido que también es de altura variable según el contenido dynamic y el ancho del navegador. El contenido principal div debería mostrar […]

Haga que los elementos de la lista flexible se escalonen en múltiples líneas en pantallas más pequeñas

Estoy tratando de hacer una lista de CSS flexible escalonar el texto en dos líneas en pantallas más pequeñas sin embargo, nada de lo que he probado parece funcionar. Intenté usar span y br en varias consultas de medios diferentes, pero fue en vano. Cualquier ayuda sería muy apreciada. Así es como me gustaría que […]

Contraer texto en Flex Sin especificar el ancho ni la flexión

Necesito tener un menú horizontal que colapsará el texto con puntos suspensivos, pero no se expande al ancho completo. He conseguido que funcione bien, excepto IE. Si configuro width o flex-basis, funcionará, pero ya no se establece en función del tamaño del contenido. ¿Alguien tiene algún consejo sobre una solución alternativa? Busqué en Google una […]

Restringe el ancho del elemento al ancho del primer hijo

Aquí tengo una situación bastante complicada que bash resolver solo con CSS. Básicamente, la idea es extremadamente simple, tengo un .item div que contiene un img y un p . La imagen no puede ser más alta que 320px, así que agregué max-height: 320px , para mantener la relación de aspecto, también tiene width: auto […]

¿Cómo empujar al niño flexbox al fondo de su contenedor?

Estoy usando Flexbox para mostrar diversos contenidos en un panel. En la parte inferior de cada panel hay una lista de icons. Esto es más fácil de visualizar en esta Demo de Codepen Y un fragmento … * { font-family: sans-serif; } .wrapper { display: flex; align-items: flex-start; width: 500px; background-color: #F9F9F9; padding: 10px; position: […]

discrepancia de flexión y contracción entre Firefox y Chrome

El siguiente ejemplo de código reducido se representa de manera diferente en Firefox frente a Chrome. ¿Es esto el resultado de un error del navegador y, de ser así, cuál es el que se representa por especificación y cuál no? Me gustaría obtener un enlace a un informe de error, si está disponible. En este […]

¿Cómo colocas elementos en una nueva fila, la misma columna con css-grid?

Mi contenido se superpone. Entiendo que es porque puse el mismo col-start , pero ¿cómo hago para que los divs de contenido crezcan y vayan por el centro de mi css-grid? ¿Debería usar flexbox con la grilla aquí? (sin Bootstrap por favor) Esto es lo que parece ahora: .mygrid { display: grid; grid-template-columns: repeat(12, [col-start] […]

ancho del contenedor flexible en línea no crece

Considere el siguiente diseño: test test test test test test y el css: .div{ display:inline-flex; background-color:lightgray; } .span1{ flex:0 0 100px; } .span2{ white-space:nowrap; } ¿Por qué el div no se estira suficientemente para cubrir los dos tramos? Esto sucede en FF y Chrome. En IE 11 / Edge funciona (como era de esperar que […]

Desbordamiento automático no funciona con justify-content: flex-end

Estoy tratando de obtener un elemento para que los elementos se alineen a la derecha, y todos los elementos desbordados que se oculten pero a los que se acceda mediante la barra de desplazamiento. Pero parece que la barra de desplazamiento desaparece cuando se especifica justify-content: flex-end . ¿Por qué es eso y cómo lo […]