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

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 中没有。）我假设包装 table 会尝试 "push" 其宽度，以便其内容完全适合自身。那么这是一个实现错误吗？还是未指定的行为？还是我的代码存在缺陷？

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

（顺便说一句...我运行进入这个 st运行ge 行为，同时尝试针对这个问题的一些初始解决方案草图：）

编辑： 两个 "visual columns" 应该具有相同的宽度。因此，涉及 max-width: 50%; for .box 的解决方案不是我要找的。我的问题实际上是关于 table 的：为什么它不增加其宽度以使其所有内容都适合自身？

该问题的解决方案应确保 table 不会 "too wide"：它的宽度应仅符合要求，以便内容恰好适合 - 但不是单个子像素更宽。

Answer 1

这在 9.2. Line Length Determination 中有解释。

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

If the used flex basis is content or depends on its available size, and the flex container is being sized under a min-content or max-content constraint (e.g. when performing automatic table layout [CSS21]), size the item under that constraint. The flex base size is the item’s resulting main size.

我不确定这是否意味着 flex 基本尺寸将是 min-content 或 max-content，因为 CSS table 两者都使用。但是因为没有wrap的机会，所以两者应该是一样的。

因此 flex 基本尺寸将是文本的宽度。
那么，

Determine the main size of the flex container using the rules of the formatting context in which it participates.

那么，table 和 flex 容器的宽度将与文本的总和一样宽。

一旦确定了弹性容器的宽度，就可以解决弹性项目的百分比问题。但它们不会影响 flex 容器的宽度（也不会影响 table）。

您可以在这段代码中更清楚地看到这一点：

.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。

Answer 2

在方框上使用min-width。你到底想做什么？你为什么使用表格？你可以使用普通的浮动 div 来做这样的事情，它不会遇到很多问题。

#container {
  
  width:50%;

  }

.box{
  max-width:49%;
  float:left;
  border:solid 3px #ccc;
 }


 .clearfix {
   clear:both;
   }

<div id="container">
  <div class="box">
  28432412341341234
  </div>
    <div class="box">
  second boxxxxx
  </div>
    <div class="box">
  third boxxxxxxxxx
  </div>
  <div class="clearfix">
    </div>
  
  </div>

Answer 3

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

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

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

2) 宽度处理程序：Content

根据内容的宽度调整外部元素，让它们没有宽度来包裹内容，就像袜子会变成你脚的形状一样。

无论如何，您真的应该考虑更改您的标记并使其成为无表的，正如@Rich fiifi 所说。

Answer 4

实际上，虽然我不是 100% 确定您想要什么，但解决方案似乎接近我之前的评论。从 .flex 中删除 flex: 1，并将 .box 中的 width:50% 更改为 flex-basis: 50%。

哦，当你在做的时候，在 123456789ABCDEF 中添加一个 space 这样它就可以真正换行....

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>

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

Why do percentage-width-sized flex box items not properly increase the width of a wrapping table that has an unspecified (i.e. auto) width?

html

css

flexbox