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

Question

I have created two columns of labels that flex and wrap. I have two issues that I cannot figure out how to solve using CSS.

1. I would like the height of all the labels to be equal to the tallest label.
2. The last element isn't half the width of the div, but expands to the entire width of the div.

Here is my demo: 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;
}

UPDATE: I've figured how the second requirement. However, the first one remains at large. How could I make the labels equal to the largest one using js if CSS isn't possible?

Answer 1

Set the max width on the label to be max-width: calc(100%/3); for the issues with the last element taking up the whole screen.

Unfortunately the only way I can think helping the situation in css is setting a minimum height but there I always a chance to go over that height. The only way I can truly think of is using Javascript.

Answer 2

What exactly are you going for? You set the width of each label to 100%/3 and then you've given them flex-grow:1; which is making them all larger, anyway. Remove flex-grow and that problem will be solved, no? Or give the last-child a smaller grow-value? I'm not sure what it's supposed to look like.

Making them all the same height as the tallest isn't possible in CSS. With JavaScript you could make a function that runs whenever the window is resized. It would have to do the following:

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.