嵌套的 flex 元素不会使父级增长

Question

我正在尝试用月份名称和该月份中的所有天在名称下方组成一个标题。

Days 项目的宽度是固定的，所以我想：为什么不使用 flexbox？

由于某些原因，.day 元素正在从其父级中下降，而父级不会增长。

您能否给我一个提示，为什么 flex-basis: auto 在数天的插槽溢出后不会使月份插槽增长？

至于实现，我已经找到了使用 float: left 而不是使用 flexbox 的解决方法。但我不明白为什么它会这样工作。

.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

使用width: 2em 而不是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>

您的代码的问题在于 Firefox 和 Chrome 的大小 .month 考虑了内容的宽度，而不是 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>

这是一个错误。根据Line Length Determination，当determining the flex base size 的.month case E 适用时：

使用其使用的flex basis 代替main size 将项目调整为available space，处理值为 content 为 max-content。

计算最大内容大小的复杂性已移至 CSS Sizing 4：

max-content inline size：盒子里的“理想”size inline axis。通常是最窄的inline size 如果软包装 none 则在适合其内容时采取 禁区内的机会被抓住了。 （见§4 Intrinsic Size Determination。）

如果是non-replaced block，

block container box 的 max-content inline size 是 布局后框的内联大小，如果所有子项的大小都小于 max-content constraint.

它明确表示“布局后”。它没有说“在 flex 布局之前”之类的东西。所以flex-basis: 2em 不应该被忽略，并且应该有助于更大的容器的最大内容大小。