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

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>

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

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

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

（顺便说一下……我在尝试针对这个问题的一些初始解决方案草图时遇到了这种奇怪的行为： Using CSS, how to create a two-column grid with equal-width columns that are “only as narrow as required”? )

---

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

该问题的解决方案应确保表格不会“太宽”：它的宽度应仅与需要的一样宽，以便内容恰好适合 - 但不能宽一个子像素。

原文由 Hauke P. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这在 9.2 中解释。线长确定。

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

如果使用的 flex 基础 是 content 或取决于它的可用大小，并且 flex 容器的大小是在最小内容或最大内容约束下（例如，当执行 自动表格布局 [CSS21] 时），大小该约束下的项目。 flex base size 是项目的最终 main size 。

我不确定这是否意味着 flex 基本大小将是最小内容或最大内容，因为 CSS 表同时使用两者。但由于没有 wrap 机会，因此两者应该相同。

所以 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>

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

原文由 Oriol 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

实际上，虽然我不是 100% 确定你想要什么，但解决方案似乎接近我之前的评论。 Remove flex: 1 from .flex and change width:50% in .box to 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>

原文由 Rene van der Lende 发布，翻译遵循 CC BY-SA 3.0 许可协议