Как сделать все метки одинаковыми по высоте с помощью 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; 
} 

UPDATE: Я понял, как второе требование. Однако первый остается на свободе. Как я могу сделать метки равными наибольшему с помощью js, если CSS невозможно?

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.