如何使用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.