html - Unexpected elements alignment with Flexbox -

html - Unexpected elements alignment with Flexbox -

premise 1: pen linked below contains bunch of code written angularjs. nevertheless, question html5+css3, can safely ignore it.

premise 2: developing web calendar. calendar divided in weeks, , features 2 main parts: navigator (displays weeks) , list of categories (each category contains event, , empty cells days) see basic version in pen.

the problem

i using flexible boxes in order develop layout adapts window resize. problem navigator's cells (days) , categories' cells (empty placeholders) not align vertically in expected way:

as can see, cells not aligned properly. thought problem reside in fact layout of category wasn't layout of navigator, since navigator divided in weeks. thus, divided empty placeholders in category, no luck.

the layout

the layour exploits bootstrap's grid system, , organized (i'll set classes, since divs):

.row .navigator <--------------------> .row .category .col-1 .navigator-header <-------------> .col-1 .category-header .col-11 .navigator-content <----------> .col-11 .category-content .week <-------------------------> .category-group .week-header (nothing here) .days <-------------------------> .cells

i set arrows associate elements of category , navigator. difference presence of week-header, doesn't have sizes set shouldn't relevant. can check css in pen, it's simple.

the question

the question is: why elements aligned differently? ignoring here?

in case need more information, allow me know. give thanks you.

the problem seem running character length of day numbers (1-31) different, causing each flex item start out @ different size. default, flex-basis set auto, means initial main size of flex item dependent upon contents (in case, numbers 1 through 31). in "holidays" row, each column has same contents ("stuff"). so, that's why each "stuff" item has same width while each day item has different size based on width of number character(s).

in pen, add flex-basis:0; .week, .category-group. sets intial main size 0px , increases size there.

here's simplified example, showing issue (demo):

class="lang-html prettyprint-override"><h1>flex:1 1 0;</h1> <div class="row"> <div class="cell">a</div> <div class="cell">a</div> <div class="cell">a</div> </div> <div class="row"> <div class="cell">a</div> <div class="cell">a</div> <div class="cell">hello world</div> </div> <h1>flex:1 1 auto;</h1> <div class="row"> <div class="cell auto">a</div> <div class="cell auto">a</div> <div class="cell auto">a</div> </div> <div class="row"> <div class="cell auto">a</div> <div class="cell auto">a</div> <div class="cell auto">hello world</div> </div> class="lang-css prettyprint-override">.row { display:flex; } .cell { flex:1 1 0; outline:1px solid red; } .cell.auto { flex:1 1 auto; }

html css twitter-bootstrap flexbox