我正在尝试编写一个标题，其中包含月份名称以及该月名称正下方的所有日期。
天项目具有固定宽度，所以我想：为什么不使用 Flexbox？
由于某些原因.day其父级元素正在下降，并且父级元素不会增长。
你能告诉我为什么吗flex-basis: auto天槽溢出后不会使月槽增长吗？
至于实现，我已经找到了使用的解决方法float: left而不是使用弹性盒。但我不明白为什么它会这样工作。
.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>
代码笔：http://codepen.io/skyboyer/pen/MyzeLW
js小提琴：https://jsfiddle.net/azizn/ytt7jb85/
Use 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>
这是一个错误。根据线长测定, when 确定柔性底座尺寸 of .month情况E适用：
将项目尺寸放入可用空间使用其使用过的柔性
基础代替它的主要尺寸，处理一个值content as max-content.
计算最大内容大小的复杂性已移至 CSS Sizing 4：
最大内容内联大小：盒子的“理想”size在里面内联轴。通常是最窄的内嵌尺寸它可以
采取同时适应其内容如果none软包装的
禁区内的机会被抓住了。 （看§4 内在尺寸
决心.)
如果出现不可替换块,
The 最大内容内联大小 of a 块状容器盒是个
布局后框的内联大小，如果所有子项的大小都在 a 下最大内容约束.
它明确表示“布局后”。它没有说“在弹性布局之前”之类的内容。所以flex-basis: 2em不应该被忽略，并且应该有助于增大容器的最大内容大小。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
