Html 如何修复带有百分比宽度列1px间距的显示柔性？

在特定宽度显示上，宽度百分比的柔性柱留有1px的间隙

html，
身体{
保证金：0；
填充：0；
}
* {
框大小：边框框；
}
.包装纸{
最大宽度：1200px；
填充：30px；
}
.集装箱{
显示器：flex；
柔性包装：包装；
背景：红色；
}
g{
填充：30px；
}
.grid-33{
宽度：33.3333%；
}
.grid-50{
宽度：50%；
}
.grid-66{
宽度：66.6666%；
}
.grid-100{
宽度：100%；
}
怀特先生{
背景：#fff；
}
黄先生{
背景#ffb401；
}

试验

试验

如果需要，您可以保留

宽度属性，并使用它作为
flex
的一个属性：

在你的情况下，我试着使用-

.grid-33 {
  flex-grow: 3;
  -webkit-flex-grow: 3;
}

.grid-66 {
  flex-grow: 7;
  -webkit-flex-grow: 7;
}

在我看来，如果有任何变化，您可以使用
flex-grow
值对其进行调整，它看起来是一样的


html，
身体{
保证金：0；
填充：0；
}
* {
框大小：边框框；
}
.包装纸{
最大宽度：1200px；
填充：30px；
}
.集装箱{
显示器：flex；
柔性包装：包装；
背景：红色；
}
g{
填充：30px；
}
.grid-33{
柔性生长：3；
-webkit-flex-grow:3；
}
.grid-50{
宽度：50%；
}
.grid-66{
弹性增长：7；
-webkit-flex-grow:7；
}
.grid-100{
宽度：100%；
}
怀特先生{
背景：#fff；
}
黄先生{
背景#ffb401；
}

试验

试验

这个问题是Chrome和Edge中的一个bug（或舍入问题），但Firefox没有







我发现了两种变通方法，一种是添加
justify内容：空格到flex容器（在某些屏幕宽度下，Chrome仍然存在1px问题）

堆栈片段


html，
身体{
保证金：0；
填充：0；
}
* {
框大小：边框框；
}
.包装纸{
最大宽度：1200px；
填充：30px；
}
.集装箱{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
背景：红色；
}
g{
填充：30px；
}
.grid-33{
宽度：33.3333%；
}
.grid-50{
宽度：50%；
}
.grid-66{
宽度：66.6666%；
}
.grid-100{
宽度：100%；
}
怀特先生{
背景：#fff；
}
黄先生{
背景#ffb401；
}

试验

试验

您使用的是什么web浏览器？我认为Firefox和Chrome没有差距。请告诉我我的答案是否有用，是否可以接受和/或投票。。。或者它根本不起作用？嗯，这就解决了问题，但同样，它是一个已经定义了百分比宽度的框架，但我会试试看。@Benn如果它已经固定了
宽度
，那么在自定义样式中，用
宽度：自动
（使用
！重要的
，如果自定义代码正好超过框架代码）第一个，间距只是移动了chrome中的bug，正如你提到的，第二个改变了容器的宽度，所以三分之一不再是三分之一。但是感谢您承认这是一个取整错误。我接受您的回答，因为它是一个浏览器错误，所以建议的“修复”都不起作用。因为我有一个周围的容器，所以我设法用1px的负右边距拉伸右列。我想我所需要的是有人来确认这是一个真正的错误，你做了。