html - Flexbox 调整复选框的大小(太小)

Question

我有一个带复选框的 HTML 公式列表。所有复选框都有一个标签。

我正在使用 flexbox 设计这个公式。使用 flexbox 使其中一个复选框比其他所有复选框都小。原因似乎是该复选框的标签文本太长，需要换行。

.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>

当然还有一个 Plunkr 演示:http://plnkr.co/edit/aagWvhpvuH5sPXBXUbUH?p=preview

这是一个 flexbox 的例子:

有人知道如何解决这个问题吗？

Answer 1

添加输入:

flex: 1;

对于标签:

flex: 2; 

它适用于 chrome、firefox、IE。