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

Question

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

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

我用flexbox设计这个公式.使用flexbox使其中一个复选框比其他复选框小.原因似乎是,该复选框的标签文本太长了,需要将其包装在下一行中.这是我的CSS(使用SCSS):

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

一张图片描绘了千言万语(首先是flexbox,第二张没有):

当然这里是一个演示;)http://plnkr.co/edit/aagWvhpvuH5sPXBXUbUH?p=preview

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

干杯,大卫

Answer 1

添加输入:

flex: 1;

对于标签:

flex: 2; 

它适用于chrome,firefox,IE.

Answer 2

您可以设置flex:none不想在弹性计算中调整大小的项目。

以下信息来自 Tailwind CSS 文档，但这也适用于纯 CSS： https: //tailwindcss.com/docs/flex#none

用于flex: 0 1 auto;允许弹性项目收缩但不增长，同时考虑到其初始大小。

用于flex: 1 1 0%;允许弹性项目根据需要增大和缩小，忽略其初始大小：

用于flex: 1 1 auto;允许弹性项目增大和缩小，同时考虑到其初始大小：

用于flex: none;防止弹性项目增大或缩小：

Answer 3

如果您在输入中添加 min-width 和 width 似乎可以解决我的问题。

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