为什么百分比宽度大小的弹性框项目不能正确地增加具有未指定（即自动）宽度的包装表的宽度？

（如果您想更轻松地使用它，这里是一个Codepen：http ://codepen.io/anon/pen/MKJmBM ）

请注意，左上方的文本box不完全适合其中。（至少在Chrome中没有。）我假设包装台会尝试“推”其宽度，以使其内容完全适合自身。那么这是一个实现错误吗？还是未指定的行为？还是我的代码有缺陷？

有人可以解释此行为并提供解决方案吗？

（顺便说一句...在尝试一些初始解决方案草图时，我遇到了这种奇怪的行为：使用CSS，如何用等宽列创建“仅按要求缩小”的两列网格？）

编辑：两个“可视列”应该都具有相等的宽度。因此，涉及例如解决方案max-width: 50%;的.box是不是我要找的。我的问题确实是关于桌子的：为什么它不增加宽度，以便所有内容正确地适合自己？

解决问题的方法应确保表格不会“太宽”：表格应仅与要求的一样宽，以使内容恰好适合-而不是单个子像素宽。

实际上，尽管我不确定您要什么，但该解决方案似乎与我之前的评论很接近。删除flex: 1从.flex和变革width:50%中.box来flex-basis: 50%。

哦，当您在使用它时，请在中添加一个空格，123456789ABCDEF以便实际上可以包裹起来...。

table {
  background-color: yellow;
  box-shadow: inset 0 0 1px red;
  max-width: 100%;
  
  /* You would get similarly strange behavior with collapsing borders: */
  /* border-collapse: collapse; */
}

td {
  background-color: lightgreen;
  box-shadow: inset 0 0 1px blue;
  max-width: 100%;
}

.flex {
  max-width: 100%;
  display: flex;
/* flex: 1;  REMOVE */
  background-color: lightblue;
  box-shadow: inset 0 0 1px black;
  flex-wrap: wrap;
}

.box {
  flex-basis: 50%; /* CHANGED from -> width: 50% */
  background-color: cyan;
  border-radius: 9px;
  box-shadow: inset 0 0 1px red;
}

  

    

      

        

          123456789 ABCDEFGHIJKL 
        
        

          meeedium
        
        

          short