Flexbox resizes a checkbox (too small)

Question

I've got a HTML formular-list with checkboxes. All checkboxes have a label.

I'm styling this formular with flexbox. Using flexbox makes one of the checkboxes smaller than all the others. The reason seems to be that the label text for that checkbox is so long that it needs to be wrapped in 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>

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

Here is an example with flexbox:

Anybody got an idea how to solve this issue?

Answer 1

You can set flex:none on items you don't want resized as part of flex calculations.

The following Information is from Tailwind CSS documentation but this applies to pure CSS too: https://tailwindcss.com/docs/flex#none

Use flex: 0 1 auto; to allow a flex item to shrink but not grow, taking into account its initial size.

Use flex: 1 1 0%; to allow a flex item to grow and shrink as needed, ignoring its initial size:

Use flex: 1 1 auto; to allow a flex item to grow and shrink, taking into account its initial size:

Use flex: none; to prevent a flex item from growing or shrinking: