Lorenzo, parte de este equipo de trabajo, nos hizo el favor de escribir esta crónica porque domina a la perfección el tema.
Solución:
Deberías usar el flex o flex-basis propiedad en lugar de width. Lea más en MDN.
.flexbox .red
flex: 0 0 25em;
los flex La propiedad CSS es una propiedad abreviada que especifica la capacidad de un elemento flexible para modificar sus dimensiones para llenar el espacio disponible. Contiene:
flex-grow: 0; /* do not grow - initial value: 0 */
flex-shrink: 0; /* do not shrink - initial value: 1 */
flex-basis: 25em; /* width/height - initial value: auto */
Una demostración simple muestra cómo configurar la primera columna para 50px ancho fijo.
.flexbox
display: flex;
.red
background: red;
flex: 0 0 50px;
.green
background: green;
flex: 1;
.blue
background: blue;
flex: 1;
1
2
3
Vea el codepen actualizado basado en su código.
En caso de que alguien quiera tener un flexbox receptivo con porcentajes (%), es mucho más fácil para las consultas de los medios.
flex-basis: 25%;
Esto será mucho más suave durante la prueba.
// VARIABLES
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xl: 1400px;
$screen-xxl: 1600px;
// QUERIES
@media screen (max-width: $screen-lg)
flex-basis: 25%;
@media screen (max-width: $screen-md)
flex-basis: 33.33%;
Si te ha resultado de provecho este post, sería de mucha ayuda si lo compartes con el resto entusiastas de la programación de este modo contrubuyes a difundir nuestra información.