Css 嵌套的Flexbox创建虚幻空白（列和行和FlexBasis和换行）

这是一个奇怪的问题——实际上我不确定这是否是一个bug，但它在Chrome和Firefox中的行为都是一样的，所以我很困惑

当满足某些条件时，嵌套的FlexBox会创建幻影空白：

• 带有

  柔性方向的外部柔性箱：立柱；柔性包装：nowrap

• 具有

  柔性方向的内部柔性箱：行和定义了弹性基础（或宽度）的弹性项目，如
  弹性基础：0

我想保留所有这些属性并删除幻影空白，我该怎么做

---

或者，也许这毕竟是一个bug？

我不确定我是否完全理解发生了什么，但问题似乎是

grid-y

上的

flex wrap

正在将所有子div上的隐式

width:auto

压缩为零

我相信，这就是幻影空白被应用的地方（你也可以通过在

grid-x

上使用

whitespace:nowrap

来消除它）——在整个事情被放大到

grid-y

的宽度之前。无论如何，只要给

grid-y

的子对象一个

100%

的宽度，就可以了：

*{
填充：0；
保证金：0；
框大小：边框框；
}
.grid-x，
.grid-y{
显示器：flex；
}
.grid-y{
保证金上限：1.5雷姆；
弯曲方向：立柱；
柔性包装：包装；
背景颜色：浅蓝色；
}
.grid-x{
弯曲方向：行；
宽度：100%；
}
.细胞{
弹性：100；
边框：3件纯蓝；
}

幻影空间
还有幻影空白
还有幻影空白

幻影空间是什么意思？@BerkKurkcuoglu我指的是额外（不需要的）空白，如果你查看链接查看我的代码笔，你可以看到它的样子。我看不到代码笔中有任何异常行为，这就是我要求澄清的原因。@BerkKurkcuoglu我知道发生了什么，我输入了太多占位符文本，因此如果文本换行（例如在电话屏幕上）空间消失了。我已经更改了示例，因此问题始终存在。看起来添加flex wrap:wrap会根据其中的包装内容计算y网格高度，就像它没有flex增长的空间一样，但我不确定确切的计算是如何工作的，也许其他人可以更好地解释，我对q投了更高的票uestion.谢谢，这个解决方案是有效的，但是如果

grid-y

曾经包装过，它会完全破坏布局，因为每个flex项目占据整个宽度，两个flex项目并排将占据200%的宽度，而不是占据一半。我想保留

flex-wrap:wrap

的原因是为了保留包装行为，不幸的是ely这个解决方案打破了这一点。好吧，你能在主帖子中分享更多的信息和一个片段吗？我假设

grid-x

意味着这是“网格”的整个x轴，在这种情况下，你可以添加额外的单元格来创建列。编辑：记住你原来的帖子也不适用听你的建议。

grid-y

和

grid-x

只是指示弹性项目的布局方向，而不是它不能换行。我想我可能知道现在发生了什么，将嵌套

grid-x

的弹性项目的flex basis设置为0可能导致高度的初始计算基于h在flex grow接管之前，宽度为0时，文本的八个部分（已包装），该高度用于

grid-y

的flex项高度，在flex grow解决

grid-x

之前。我会将您的答案标记为已接受，并进一步考虑这一点。只是跟进，这是一个浏览器错误（适用于Firefox和Chrome）。