Html 为什么宽度百分比大小的软盒项目不能适当增加具有未指定（即自动）宽度的包装表的宽度？

请看一下这个片段：

表格{
背景颜色：黄色；
方框阴影：插入0 1px红色；
最大宽度：100%；
/*当边界塌陷时，也会出现类似的奇怪行为：*/
/*边界塌陷：塌陷*/
}
运输署{
背景颜色：浅绿色；
框阴影：嵌入0 1px蓝色；
最大宽度：100%；
}
.flex{
最大宽度：100%；
显示器：flex；
弹性：1；
背景颜色：浅蓝色；
方框阴影：嵌入0 1px黑色；
柔性包装：包装；
}
.盒子{
宽度：50%；
背景色：青色；
边界半径：9px；
方框阴影：插入0 1px红色；
}

123456789ABCDEFGHIJKL
米迪姆
短的

中对此进行了解释

• 首先，确定每个项目的弹性基础尺寸。这种情况很复杂，因为

  宽度：50%

  取决于可用的大小。说明书上说
  如果使用的是

  内容

  或取决于其可用性 大小，并且flex容器的大小在最小内容或 最大内容约束（例如，执行时），在该约束下调整项目大小。这个 是项目的结果
  我不确定这是否意味着flex基本大小将是最小内容还是最大内容，因为CSS表同时使用这两种内容。但由于没有包装机会，两者应该是相同的
  因此，flex base大小将是文本的宽度

• 那么
  使用的规则确定flex容器的 它参与的格式化上下文
  然后，表和flex容器的宽度将与文本之和相同

一旦确定了flex容器的宽度，就可以解析flex项目的百分比。但它们不会影响flex容器（或表）的宽度

您可以在这个片段中更好地看到这一点：

.flex{
显示器：flex；
背景颜色：浅蓝色；
方框阴影：嵌入0 1px黑色；
柔性包装：包装；
}
.盒子{
宽度：50%；
背景色：青色；
边界半径：9px；
方框阴影：插入0 1px红色；
}

123456789ABCDEFGHIJKL
米迪姆
短的
123456789ABCDEFGHIJKL
米迪姆
短的

在框上使用最小宽度。你到底想做什么？你为什么用桌子？你可以用普通的浮动div来做类似的事情，它不会遇到很多问题

#容器{
宽度：50%；
}
.盒子{
最大宽度：49%；
浮动：左；
边框：实心3px#ccc；
}
.clearfix{
明确：两者皆有；
}

28432412341341234
第二箱XXXX
第三箱XXXXXXXX

问题是您需要以某种方式定义宽度。有两种方法可以做到这一点

1）宽度处理程序：最后一个外部元素

使用百分比值将内部元素的宽度调整为外部元素的宽度，因此定义宽度的最后一个元素（从内部到外部）将成为其所有内部元素的宽度处理程序

2）宽度处理程序：内容

将外部元素调整为内容的宽度，使其不带宽度以包裹内容，就像袜子会呈现脚的形状一样

---

不管怎样，你应该真正考虑改变你的标记，使它成为无表格的，正如@富里菲菲所说。

< P>实际上，当我对你想要的东西不确定100%时，解决方案似乎接近我之前的评论。从

.flex

中删除

flex:1

，并将

框中的
宽度：50%
更改为
flex基准：50%

哦，当你在做的时候，在
123456789ABCDEF
中添加一个空格，这样它就可以实际包装了


表格{
背景颜色：黄色；
方框阴影：插入0 1px红色；
最大宽度：100%；
/*当边界塌陷时，也会出现类似的奇怪行为：*/
/*边界塌陷：塌陷*/
}
运输署{
背景颜色：浅绿色；
框阴影：嵌入0 1px蓝色；
最大宽度：100%；
}
.flex{
最大宽度：100%；
显示器：flex；
/*柔性：1；移除*/
背景颜色：浅蓝色；
方框阴影：嵌入0 1px黑色；
柔性包装：包装；
}
.盒子{
弹性基准：50%；/*已从->宽度：50%更改*/
背景色：青色；
边界半径：9px；
方框阴影：插入0 1px红色；
}

123456789 ABCDEFGHIJKL
米迪姆
短的
每个框的实际宽度应正好是整个表格宽度的一半。因此，我不是在寻找一种增加单个盒子宽度的解决方案，而是要增加整个桌子的宽度关于我到底想做什么：请看一看让我发现这种奇怪的问题：）如果有一个“普通浮动div”的解决方案，请在回答另一个问题时提供一个例子。非常感谢！非常感谢。不幸的是，现在网格太宽，即所有单元格都有大量未使用的空间。我要求表格“尽可能窄”，这样它就足够宽，可以容纳内容，但不能超过这个宽度。再次感谢-但现在网格单元格的宽度并不都相同。（或者更准确地说：没有一个网格单元的宽度正好是整个网格宽度的一半。）我真的不明白你想做什么。也许如果你能展示一个合适的例子或你的项目，我可以帮助你。看看这个问题：它包括一个详细的描述和我试图实现的演示