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

Question

我创建了两列 flex 和环绕的标签。我有两个问题无法弄清楚如何使用 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。