Nested Flex Elements Don't Make Parent Grow

I'm trying to compose a header with month names and all days in that month right below the name. Days items have fixed width so I thought: why not use flexbox? For some reasons .da

Solution 1:

Use width: 2em instead of flex: 0 0 2em.

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

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

The problem with your code is that Firefox and Chrome size .month taking the width of the contents into account, but not flex-basis.

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

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

This is a bug. According to Line Length Determination, when determining the flex base size of .month case E applies:

size the item into the available space using its used flex basis in place of its main size, treating a value of content as max-content.

The intricacies of calculating a max-content size were moved to CSS Sizing 4:

max-content inline size: The box’s “ideal” size in the inline axis. Usually the narrowest inline size it could take while fitting around its contents if none of the soft wrap opportunities within the box were taken. (See §4 Intrinsic Size Determination.)

In case of a non-replaced block,

The max-content inline size of a block container box is the inline-size of the box after layout, if all children are sized under a max-content constraint.

It explicitly says "after layout". It doesn't say something like "before flex layout". So flex-basis: 2em shouldn't be ignored, and should contribute to a bigger max-content size of the container.