如何使用flexbox使所有标签的高度相同？

Question

我创建了两列可伸缩的标签。 我有两个问题，我无法弄清楚如何使用CSS解决。

1. 我希望所有标签的高度都等于最高标签。
2. 最后一个元素不是div宽度的一半，而是扩展到div的整个宽度。

这是我的演示： http : //jsfiddle.net/pdExf/869/

HTML：

<div>
  <label>
    <input type="checkbox"/>
    <span > 1-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 2-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 3-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 4-very_short_word </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 5-medium_length_word </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 6-still_no_spaces </span>
  </label>
  <label>
    <input type="checkbox"/>
    <span> 7-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces   </span>
  </label>
</div>

CSS：

span {
  margin-left: 14px;
  word-break: break-all;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  background-color: yellow;
}

label {
  box-sizing: border-box;
  background: white;
  color: black;
  padding: 10px;
  margin: 10px 10px 20px 10px;
  border: 1px solid black;
  flex-grow: 1;
  flex-shrink: 1;
  width: calc(100% / 3); // n_rows + 1;
  max-width: calc(50% - 20px); // 50% minus the pixels
}

div {
  height: 200px;
  background-color: lightblue;
  overflow: scroll;
  display: flex;
  flex-wrap: wrap;
}

更新：我想出了第二个要求。 但是，第一个仍然很大。 如果无法使用CSS，如何使用js使标签等于最大标签？

Answer 1

将标签上的最大宽度设置为最大宽度max-width: calc(100%/3); 最后一个元素占用整个屏幕的问题。

不幸的是，我认为可以帮助解决CSS问题的唯一方法是设置最小高度，但是我总是有机会超过该高度。 我真正想到的唯一方法是使用Javascript。

Answer 2

你到底要干什么 您将每个标签的宽度设置为100％/ 3，然后为其赋予flex-grow:1; 无论如何，这都使它们变大了。 删除flex-grow即可解决问题，不是吗？ 还是给最后一个孩子一个较小的成长价值？ 我不确定应该是什么样子。

在CSS中无法使它们与最高高度相同。 使用JavaScript，您可以使函数在窗口调整大小时运行。 它必须执行以下操作：

1) Set all heights to auto.

2) Iterate through all heights to find the largest value.

3) Set all heights (or set min-heights) to the newfound value.