Flexbox resizes check box (too small)

Question

I have an HTML list of checkbox formulas. All flags are labeled.

I create this form using flexbox. Using flexbox makes one of the checkboxes smaller than all the others. It seems that the reason is that the label text for this flag is so long that it needs to be moved to the next line.

.filter-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.filter-list input[type=checkbox] {
    margin-right: 2rem;
    height: 20px;
    width: 20px;
}

<li>
    <input class="filterCheckbx" id="filter1" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter1">Hochschule</label>
</li>
<li>
    <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>
<li>
    <input class="filterCheckbx" id="filter3" type="checkbox" name="section" value="Bauen & Gestalten">
    <label for="filter3">Bauen & Gestalten</label>
</li>
<li>
    <input class="filterCheckbx" id="filter4" type="checkbox" name="section" value="BWL">
    <label for="filter4">BWL</label>
</li>
<li>
    <input class="filterCheckbx" id="filter5" type="checkbox" name="section" value="Informatik">
    <label for="filter5">Informatik</label>
</li>
<li>
    <input class="filterCheckbx" id="filter6" type="checkbox" name="section" value="Logistik">
    <label for="filter6">Logistik</label>
</li>

Run codeHide result

And of course, here's a Plunkr demo: http://plnkr.co/edit/aagWvhpvuH5sPXBXUbUH?p=preview

Here is an example with flexbox:

Anyone have any ideas how to solve this problem?

Answer 1

Add for inputs:

flex: 1;

And for tags:

flex: 2; 

It works for me on chrome, firefox, IE.

Answer 2

, , , .

input[type=checkbox]{
    margin-right: 2rem;
    height: 20px;
    width: 20px;
    min-width: 20px;
}

Answer 3

- Webkit, , flex-child.

-

body{ font:14 Arial; }

label {
	display: inline-block;
	line-height: 1.2;
	margin-bottom: 2px;
	cursor: pointer;
}

label.checkbox {
	display: inline-flex;
}

label.checkbox > input {
	line-height: 2;
	margin: 4px 0 0 0;
	width: 35px; /* THE FIX */
}

<label class='checkbox'>
  <input type="checkbox" />
  This is a very verryyyyy long label for a checkbox item, try to click it!
</label>

Hide result

Answer 4

iOS Safari 13.1 - @vsync, WebKit <input> .

, <div> .

<li>
    <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>

<li>
    <div>
        <input class="filterCheckbx" id="filter2" type="checkbox" name="section" value="Angewandte Ingenierwissenschaften">
    </div>
    <label for="filter2">Angewandte Ingenierwissenschaften</label>
</li>

, .