Firefox中换行inline-flex容器宽度计算错误，求解决方案？

问题背景 #

需要实现表单布局：

• 表单字段横向排列，标签置于字段上方
• 复选框区域以2列堆叠展示

采用inline-flex + flex-direction: column + flex-wrap: wrap方案时，Chrome表现正常，但Firefox会错误计算容器宽度（仅取第一列宽度），导致后续元素覆盖复选框容器。由于需要动态增删复选框，表格布局不适用，需寻找替代方案。

效果对比 #

Chrome正常布局：

Firefox布局异常（后续元素覆盖复选框）：

原代码示例 #

.text-label {
    display: inline-flex;
    flex-direction: column;
}

.checkboxes {
    display:inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 3rem;
}

.checkbox-label {

}

<span class="text-label"><label for="before">Before</label><input type="text" id="before", name="before"></span>

<span class="checkboxes">
  <span class="checkbox-label"><input type="checkbox" id="box1" name="box1" checked /><label for="box1">box1</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box2" name="box2" checked /><label for="box2">box2</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box3" name="box3" checked /><label for="box3">box3</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box4" name="box4" checked /><label for="box4">box4</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box5" name="box5" checked /><label for="box5">box5</label></span>
  <span class="checkbox-label"><input type="checkbox" id="box6" name="box6" checked /><label for="box6">box6</label></span>
</span>

<span class="text-label"><label for="after">After</label><input type="text" id="after", name="after"></span>

可行解决方案 #

方案1：CSS Grid布局（推荐）

Grid对多列排列的支持更稳定，自动计算容器宽度，完美适配动态增删场景：

.text-label {
    display: inline-flex;
    flex-direction: column;
}

.checkboxes {
    display: inline-grid;
    grid-template-columns: repeat(2, auto); /* 2列，宽度自适应内容 */
    gap: 0.25rem; /* 可选：添加复选框间距 */
}

.checkbox-label {
    display: flex;
    align-items: center; /* 复选框与文字垂直对齐 */
}

无需固定高度，Grid会根据内容数量自动分2列，容器宽度计算准确，动态增删复选框时布局自动调整。

方案2：为Flex容器设置最小宽度（兼容原逻辑）

若想保留原Flex垂直换行逻辑，手动指定容器最小宽度规避Firefox的计算错误：

.text-label {
    display: inline-flex;
    flex-direction: column;
}

.checkboxes {
    display:inline-flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 3rem;
    min-width: 120px; /* 需根据复选框内容宽度调整，取两列宽度之和 */
}

.checkbox-label {
    width: 60px; /* 固定单个复选框项宽度，保证列宽一致 */
}

适合内容宽度固定的场景，需提前预估或动态计算宽度。

方案3：CSS Columns布局

原生支持多列排列，自动适配宽度：

.text-label {
    display: inline-flex;
    flex-direction: column;
}

.checkboxes {
    display: inline-block;
    columns: 2; /* 指定列数 */
    column-gap: 0.5rem;
}

.checkbox-label {
    break-inside: avoid; /* 防止单个复选框被拆分到两列 */
    margin-bottom: 0.25rem;
}

支持动态增删，容器宽度自动适配两列总宽度。

内容的提问来源于stack exchange，提问作者Guttorm Vik