为什么百分比宽度大小的弹性框项目没有正确增加具有未指定（即自动）宽度的包装表的宽度？ [英] 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?

问题描述

请查看此代码段：

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 ）

请注意，左上角的方块并不完全适合。 （至少在Chrome它不。）我假设包装表将尝试推其宽度，以便其内容完全适合自己。那么这是一个实现错误？还是未指定的行为？

Please note that the text in the upper left box does not completely fit into it. (At least in Chrome it does not.) I was assuming that the wrapping table would try to "push" its width in order for its contents to completely fit into itself. So is this an implementation bug? Or an unspecified behavior? Or is my code simply flawed?

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

Can someone explain this behavior and provide a solution to fix it?

（顺便说一句...我遇到这个奇怪的行为，同时尝试一些初步的解决方案草图为这个问题：使用CSS，如何创建具有只有所需要的狭窄的等宽列的两列网格。 ？）

(By the way... I ran into this strange behavior while experimenting with some initial solution sketches for this question: Using CSS, how to create a two-column grid with equal-width columns that are "only as narrow as required"?)

修改：两个视觉列等宽。因此，涉及例如 max-width：50％; for .box 的解决方案不是我要找的。我的问题是真的关于表：为什么不增加其宽度，以使其所有内容适合本身？

The two "visual columns" should both have an equal width. Therefore solutions involving for example max-width: 50%; for .box are not what I'm looking for. My question is really about the table: Why does it not increase its width so that all of its contents fit properly into itself?

问题的解决方案应该确保该表将不会是太宽：它应该只有所需的宽度，以便内容将适合 - 但不是一个单个子像素更宽。

A solution for the problem should make sure that the table will not be "too wide": It should only be as wide as required so that the contents will just fit - but not a single subpixel wider.

推荐答案

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

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

• First, the flex base size is determined for each item. This case it's complicated, because width: 50% depends on the available size. The spec says

如果使用 flex基础是 content 或取决于它可用的
大小，根据min-content或
max-content约束确定大小（例如，当执行自动表
布局 [ CSS21] ），调整该约束下的项目大小。
弹力基座尺寸是项目的主要尺寸。

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表使用两者。因为没有包装机会，两者应该是一样的。

I'm not sure if that means the flex base size will be the min-content or max-content, because CSS tables use both. But since there are no wrap opportunities, both should be the same.

因此flex base的大小将是文本的宽度。

So the flex base size will be the width of the text.

然后，

确定

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

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

Then, the table and the flex container will be as wide as the sum of texts.

一旦flex容器的宽度已经建立，flex项目的百分比可以解决。但是它们不会影响flex容器（也不是表格）的宽度。

Once the width of the flex container has been established, the percentages of the flex items can be resolved. But they won't affect the width of the flex container (nor the table).

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

You can see this better in this snippet:

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

Basically, what you want is make all flex items as wide as the widest one. I don't think there is a way to do that in CSS, but you can use JS.

这篇关于为什么百分比宽度大小的弹性框项目没有正确增加具有未指定（即自动）宽度的包装表的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！