嵌套的flex元素不会使父成长 [英] nested flex elements don't make parent grow

问题描述

我想在月份名称下方撰写标题，并在该月份的所有日期。

日期项目具有固定宽度，因此我想：为什么不使用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>  

a href =http://codepen.io/skyboyer/pen/MyzeLW =nofollow> http://codepen.io/skyboyer/pen/MyzeLW

jsFiddle： https://jsfiddle.net/azizn/ytt7jb85/ p>

解决方案

使用 width：2em 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;}。柔性; 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>  

bug。根据线长确定，当确定 .month 案例E适用： 使用其使用的，选择org / TR / css3-sizing /＃terms =nofollow flex-flex-basisrel =nofollow> flex
basis 替换其 main size ，处理值
content as max-content 。

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

max-content inline size ：框中的理想大小在
内联轴。通常最窄的内置大小可以
同时围绕其内容装配，如果无软包装
内的机会被采取。 （请参阅§4内在尺寸
确定。）

如果未替换块，

max-content inline size 块容器框是布局后框的
inline-size，如果所有的孩子的大小都是
最大内容限制。

它明确说布局后。它不会说前flex布局。因此， flex-basis：2em 不应该被忽略，并且应该有助于更大的容器最大内容大小。

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 .day elements are falling of their parent and parent does not grow.

Could you please give me a hint why flex-basis: auto doesn't make month-slot grow after days' slot overflow it?

As for implementation I've already found workaround with using float: left instead of using flexbox. But I cannot understand why it works this way.

.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/

解决方案

Use width: 2em instead of 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>

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: 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>

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.

这篇关于嵌套的flex元素不会使父成长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！