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

Question

请查看以下代码段：

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;
  background-color: lightblue;
  box-shadow: inset 0 0 1px black;
  flex-wrap: wrap;
}

.box {
  width: 50%;
  background-color: cyan;
  border-radius: 9px;
  box-shadow: inset 0 0 1px red;
}

<table>
  <tr>
    <td>
      <div class="flex">
        <div class="box">
          123456789ABCDEFGHIJKL
        </div>
        <div class="box">
          meeedium
        </div>
        <div class="box">
          short
        </div>
      </div>
    </td>
  </tr>
</table>

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

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

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

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

---

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

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

Answer 1

实际上，尽管我不确定您要什么，但该解决方案似乎与我之前的评论很接近。删除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;
}

<table>
  <tr>
    <td>
      <div class="flex">
        <div class="box">
          123456789 ABCDEFGHIJKL <!-- NOTICE THE SPACE!!!!-->
        </div>
        <div class="box">
          meeedium
        </div>
        <div class="box">
          short
        </div>
      </div>
    </td>
  </tr>
</table>

Answer 2

这在9.2 中有解释。线长测定。

• 首先，确定每个项目的 flex 基础尺寸。这种情况很复杂，因为width: 50%取决于可用大小。规范说

  如果使用的flex 基础是content或取决于其可用大小，并且 flex 容器在 min-content 或 max-content 约束下调整大小（例如，在执行自动表格布局 [CSS21] 时），则在该约束下调整项目的大小。该 柔性基座尺寸是该项目的产生主要尺寸。

  我不确定这是否意味着 flex 基本大小将是 min-content 或 max-content，因为 CSS 表同时使用两者。但由于没有包装机会，两者应该是相同的。

  所以 flex 基本尺寸将是文本的宽度。

• 然后，

  使用它参与的格式化上下文的规则确定flex 容器的主要大小。

  然后，表格和 flex 容器将与文本总和一样宽。

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

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

.flex {
  display: flex;
  background-color: lightblue;
  box-shadow: inset 0 0 1px black;
  flex-wrap: wrap;
}
.box {
  width: 50%;
  background-color: cyan;
  border-radius: 9px;
  box-shadow: inset 0 0 1px red;
}

<table>
  <tr>
    <td>
      <div class="flex">
        <div class="">
          123456789ABCDEFGHIJKL
        </div>
        <div class="">
          meeedium
        </div>
        <div class="">
          short
        </div>
      </div>
    </td>
  </tr>
</table>
<table>
  <tr>
    <td>
      <div class="flex">
        <div class="box">
          123456789ABCDEFGHIJKL
        </div>
        <div class="box">
          meeedium
        </div>
        <div class="box">
          short
        </div>
      </div>
    </td>
  </tr>
</table>

基本上，您想要的是使所有 flex 项目与最宽的项目一样宽。我认为在 CSS 中没有办法做到这一点，但您可以使用 JS。