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 has_many :comments, as: :commentable, dependent: :destroy accepts_nested_attributes_for :comments的解决方案并不是我想要的。我的问题实际上是关于表格：为什么它不增加宽度以使其所有内容都适合自己？

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

Answer 1

9.2. Line Length Determination中解释了这一点。

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

如果使用的flex basis为content或取决于其可用性尺寸，并且Flex容器的尺寸在最小内容或最大内容约束（例如，在执行automatic table layout [CSS21]时），在该约束下调整项目的大小。该 flex base size是项目的结果main size。

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

因此，flex基本大小将是文本的宽度。
然后，

使用规则确定Flex容器的main size 它参与的格式化上下文。

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

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 2

实际上，虽然我对你想要的东西不是100％肯定，但解决方案似乎接近我之前的评论。从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 3

在包装盒上使用最小宽度。你准备做什么？你为什么要用桌子？你可以使用普通的浮动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 4

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

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

调整内部元素＆＃39;宽度要超出元素＆＃39;宽度与百分比值，因此您定义宽度的最后一个元素（内部到外部）将是所有它的内部元素的宽度处理程序。

2）宽度处理程序：内容

将outter元素调整为内容的宽度，让它们无宽度以包裹内容，就像袜子会采用你的脚的形状一样。

无论如何，你应该考虑改变你的标记并使它无表情，正如@Rich fiifi所说。

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

4 个答案: