Html Flexbox:当柔性方向：列，柔性包裹：包裹时，宽度计算错误

我在使用flexbox时遇到了一个问题

我使用的容器具有

flex-direction:column；flex wrap:wrap

，因此我的内部项目实际上可以放在多个列中

问题是浏览器仍然将容器的宽度计算为内部项宽度的总和

我的容器块应该有一个较小的宽度（基于内容大小），但它实际上是巨大的

无论如何，当使用列而不是行时，以这种方式计算容器的宽度也是非常不自然的

看看我代码中的绿色块。它有一个巨大的和，但它不应该有这样的。此外，当您从容器中移除项目时，它会变小

我希望容器的宽度很小，这样就不会占用超过一半的可用空间

在最新的Safari和最新的OS X上的Chrome上检查了这一点

.container{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
背景：#aa0000；
高度：100px；
}
.组{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
调整内容：灵活启动；
}
.g1{
背景：#00aa00；
}
.g2{
背景：#0000aa；
}

项目
项目
项目
项目
项目
项目
项目
项目

您没有预先确定的宽度，因此它会将其注册为50%宽度的字段。通常，您会在g1组中设置一个宽度，然后调整：1；在g2组中，您没有预先确定的宽度，因此它会将其注册为50%宽度的字段。通常，您会在g1组中设置一个宽度，然后调整：1；g2组

良好。这两个组的宽度为其父容器的

50%

（一半），默认情况下，该容器的宽度为主体的

宽度：100%

。因此，如果您希望列更小，可以使

.container

更小，也可以使一个组更小，例如

.g1

宽度：30%

请参见以下两个示例：

.g1更小

.container{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
背景：#aa0000；
高度：100px；
}
.组{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
调整内容：灵活启动；
}
.g1{
背景：#00aa00；
宽度：30%；
}
.g2{
背景：#0000aa；
/*flex:1；也可以使用此*/
}

项目
项目
项目
项目
项目
项目
项目
项目

很好。这两个组的宽度为其父容器的

50%

（一半），默认情况下，该容器的宽度为主体的

宽度：100%

。因此，如果您希望列更小，可以使

.container

更小，也可以使一个组更小，例如

.g1

宽度：30%

请参见以下两个示例：

.g1更小

.container{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
背景：#aa0000；
高度：100px；
}
.组{
显示器：flex；
柔性包装：包装；
弯曲方向：立柱；
调整内容：灵活启动；
}
.g1{
背景：#00aa00；
宽度：30%；
}
.g2{
背景：#0000aa；
/*flex:1；也可以使用此*/
}

项目
项目
项目
项目
项目
项目
项目
项目

这似乎是涉及

flex-direction:column

和

flex-wrap:wrap

的另一个bug

在这个问题上，浏览器似乎无处不在

在这种特殊情况下，如a中所述：

在我看来，宽度的计算就像内部元素是水平布置的（

flex-direction:row

），而不是垂直布置的

在其他情况下，情况正好相反：

在这两种情况下，目前都没有解决问题的flex方法

对于这个特殊的问题，一位开发人员提供了CSS解决方案，但我不确定它是否适用于所有浏览器。除非你真的很绝望，否则我不会推荐：

在某些情况下，您可以使用 垂直书写模式

也就是说，不使用

flex-direction:column，使用
flex方向：行；书写方式：垂直lr。记得重新设置
写入模式：初始在flexbox的子项中


错误报告：







这似乎是涉及
flex-direction:column
和
flex-wrap:wrap
的另一个bug

在这个问题上，浏览器似乎无处不在

在这种特殊情况下，如a中所述：

在我看来，宽度的计算就像内部元素是水平布置的（
flex-direction:row
），而不是垂直布置的

在其他情况下，情况正好相反：




在这两种情况下，目前都没有解决问题的flex方法

对于这个特殊的问题，一位开发人员提供了CSS解决方案，但我不确定它是否适用于所有浏览器。除非你真的很绝望，否则我不会推荐：

在某些情况下，您可以使用
垂直书写模式

也就是说，不使用
flex-direction:column，使用
flex方向：行；书写方式：垂直lr。记得重新设置
写入模式：初始在flexbox的子项中


错误报告：