html - transmisiones - ejes flexibles definicion

los elementos flexibles anidados no hacen que los padres crezcan

Question

Intento redactar un encabezado con los nombres de los meses y todos los días de ese mes justo debajo del nombre.

Los artículos de los días tienen un ancho fijo, así que pensé: ¿por qué no usar flexbox?

Por alguna razón, los elementos .day caen de sus padres y los padres no crecen.

¿Podría darme una pista de por qué flex-basis: auto no hace que crezca la ranura de un mes después de que la ranura de días lo sobrepasa?

En cuanto a la implementación, ya he encontrado una solución con el uso de float: left lugar de usar flexbox. Pero no puedo entender por qué funciona de esta manera.

.main {
display: flex;
}
.month {
flex: 0 0 auto;
}
.days {
display: flex;
}
.day {
flex: 0 0 2em;
}

<div class=''main''>
<div class=''month''>
<div class=''name''>Jan</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
<div class=''day''>3</div>
<div class=''day''>4</div>
<div class=''day''>5</div>
<div class=''day''>6</div>
</div>
</div>
<div class=''month''>
<div class=''name''>Feb</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
<div class=''day''>3</div>
<div class=''day''>4</div>
<div class=''day''>5</div>
<div class=''day''>6</div>
<div class=''day''>7</div>
<div class=''day''>8</div>
<div class=''day''>9</div>
<div class=''day''>10</div>
</div>
</div>
<div class=''month''>
<div class=''name''>Mar</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
</div>
</div>
</div>

codepen: http://codepen.io/skyboyer/pen/MyzeLW

jsFiddle: https://jsfiddle.net/azizn/ytt7jb85/

Answer 1

Usar width: 2em lugar de flex: 0 0 2em .

.main {
display: flex;
}
.month {
flex: 0 0 auto;
}
.days {
display: flex;
}
.day {
width: 2em;
}

<div class=''main''>
<div class=''month''>
<div class=''name''>Jan</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
<div class=''day''>3</div>
<div class=''day''>4</div>
<div class=''day''>5</div>
<div class=''day''>6</div>
</div>
</div>
<div class=''month''>
<div class=''name''>Feb</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
<div class=''day''>3</div>
<div class=''day''>4</div>
<div class=''day''>5</div>
<div class=''day''>6</div>
<div class=''day''>7</div>
<div class=''day''>8</div>
<div class=''day''>9</div>
<div class=''day''>10</div>
</div>
</div>
<div class=''month''>
<div class=''name''>Mar</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
</div>
</div>
</div>

El problema con tu código es que Firefox y Chrome tienen un tamaño de .month teniendo en cuenta el ancho de los contenidos, pero no de forma flex-basis .

.main {
display: flex;
}
.month {
flex: 0 0 auto;
}
.days {
display: flex;
overflow: hidden;
}
.main.big .day {
flex: 0 0 2em;
}
.main.big > .month:after {
content: '''';
position: absolute;
top: 0;
bottom: 0;
border: 1px solid red;
}

<div class=''main grow''>
<div class=''month''>
<div class=''name''>Jan</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
<div class=''day''>3</div>
<div class=''day''>4</div>
<div class=''day''>5</div>
<div class=''day''>6</div>
</div>
</div>
<div class=''month''>
<div class=''name''>Feb</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
<div class=''day''>3</div>
<div class=''day''>4</div>
<div class=''day''>5</div>
<div class=''day''>6</div>
<div class=''day''>7</div>
<div class=''day''>8</div>
<div class=''day''>9</div>
<div class=''day''>10</div>
</div>
</div>
<div class=''month''>
<div class=''name''>Mar</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
</div>
</div>
</div>
<hr />
<div class=''main big''>
<div class=''month''>
<div class=''name''>Jan</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
<div class=''day''>3</div>
<div class=''day''>4</div>
<div class=''day''>5</div>
<div class=''day''>6</div>
</div>
</div>
<div class=''month''>
<div class=''name''>Feb</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
<div class=''day''>3</div>
<div class=''day''>4</div>
<div class=''day''>5</div>
<div class=''day''>6</div>
<div class=''day''>7</div>
<div class=''day''>8</div>
<div class=''day''>9</div>
<div class=''day''>10</div>
</div>
</div>
<div class=''month''>
<div class=''name''>Mar</div>
<div class=''days''>
<div class=''day''>1</div>
<div class=''day''>2</div>
</div>
</div>
</div>

Este es un error. De acuerdo con la Determinación de la longitud de la línea , cuando se determina el tamaño de la base flexible del .month caso E se aplica:

clasifique el artículo en el espacio disponible utilizando su base flex usada en lugar de su tamaño principal , tratando el valor del content como max-content .

Las complejidades de calcular un tamaño de contenido máximo se trasladaron a CSS Sizing 4:

max-content inline size : El tamaño "ideal" de la caja en el eje en línea . Por lo general, el tamaño de línea más angosto que podría tomarse mientras se ajuste a su contenido si no se tomara ninguna de las oportunidades de envoltura suave dentro de la caja. (Ver §4 Determinación del tamaño intrínseco ).

En caso de un bloque no reemplazado ,

El tamaño en línea de contenido máximo de un cuadro contenedor de bloques es el tamaño en línea del cuadro después del diseño, si todos los elementos secundarios tienen una restricción de contenido máximo .

Explica explícitamente "después del diseño". No dice algo como "antes del diseño flexible". Así que flex-basis: 2em no debería ser ignorado, y debería contribuir a un tamaño de contenido máximo más grande del contenedor.