fieldset多列布局在Microsoft Edge中失效但Firefox正常的原因及替代方案咨询

我不是CSS专业人士，平时就是靠读示例、查规范慢慢摸索着写样式的。这次遇到个头疼的问题，特意来请教大家：

我用Perl CGI生成了一个带多个选项的fieldset，默认是垂直堆叠排列的。考虑到屏幕宽度，我想把它改成能自适应的多列布局，于是给fieldset加了一个mc类（是“multi-column”的缩写），写了下面的样式：

.mc { 
  column-width: 4cm; 
  column-count: auto; 
  display: flow-root; 
}

对应的HTML结构是这样的：

<fieldset class="mc" id="i-fs-o1">
  <legend>Title</legend>
  <label><input type="checkbox" name="sf-0" value="1" checked="checked">Text 1</label><br>
  <label><input type="checkbox" name="sf-1" value="1" checked="checked">Text 2</label><br>
  <label><input type="checkbox" name="sf-2" value="1">Text 3 maybe longer</label><br>
  <label><input type="checkbox" name="sf-8" value="1">Text 4</label><br>
  <label><input type="checkbox" name="sf-4" value="1" checked="checked">Text 5</label><br>
  <label><input type="checkbox" name="sf-5" value="1" checked="checked">Text 6 has different size, also</label><br>
  <label><input type="checkbox" name="sf-6" value="1">Text 7</label><br>
  <label><input type="checkbox" name="sf-7" value="1" checked="checked">Text 8</label><br>
  <label><input type="checkbox" name="sf-10" value="1">Text 9</label><br>
</fieldset>

这个布局在Firefox里显示得很符合预期，但在Microsoft Edge里完全没生效，选项还是老老实实垂直堆着。另外我也不确定display: flow-root是不是最优的选择，只是在Firefox里试出来这个属性搭配多列的效果最顺眼。

我的核心需求其实很简单：想要一个能随屏幕尺寸自动调整、长标签也能友好换行的布局，所以才想到了多列方案，不过如果有其他更合适的替代思路，我也完全愿意尝试！

对了，实际的表单里不止这一个fieldset，所以如果能把多个fieldset本身也做合理的排列，也是可以考虑的方向。

内容来源于stack exchange