使用column-count时内部flex布局div被拆分截断问题求解

当对嵌套了设置display: flex属性的div的容器使用column-count属性时，会出现子元素被从中间切割截断的问题。通用的修复方案是给子元素设置display: inline-block避免该问题，但修改后又会出现多个短内容子元素排布在同一行的新问题。

你可以点击下方代码片段的运行按钮，查看添加和不添加display: inline-block属性时分别出现的问题及对应说明，可点击右上角「整页查看」完整复现问题。

示例代码 #

JS逻辑

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      checkboxes: [],
      displayInlineBlock: false,
    }
  },
  methods: {
    toggleDisplayInlineBlock() {
      this.displayInlineBlock = !this.displayInlineBlock;
    },
  },
})

样式代码

.modal {
  width: 750px;
  height: 400px;
  overflow-y: scroll;
  border: 2px solid lightgrey;
}

.container {
  column-count: 3;
}

.v-input--checkbox {
  margin: 0.33em 0;
  padding: 0;
}

.container-inline > div {
  display: inline-block;
}

.btn {
  background-color: tomato;
  color: white;
  padding: 1em;
}

页面结构

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <p>(打开全屏预览查看问题)</p>
    <button @click="toggleDisplayInlineBlock" class="btn">
      切换显示模式 - 当前是否为inline block：{{displayInlineBlock}}
    </button>
    
        <div v-if="displayInlineBlock">
      当前已设置<code>inline-block</code>，修复了文本被截断的问题，但两个短标签元素会出现在同一行，比如上方的"testing"和"abc"复选框，"abc"应该在"testing"下方
    </div>
    <div v-else>
      当前未设置<code>inline-block</code>，行元素会被截断，比如 hover 部分复选框时会高亮下一列的复选框，长文本应该在同一列内换行
    </div>
    
    <div class="modal">
      <div class="container" :class="{'container-inline': displayInlineBlock}">
        <v-checkbox label="testing"></v-checkbox>
        <v-checkbox label="abc"></v-checkbox>
        <v-checkbox label="testing lorem ipsum"></v-checkbox>
        <v-checkbox label="testing lorem"></v-checkbox>
        <v-checkbox label="testing ip"></v-checkbox>
        <v-checkbox label="testing dorset illemet lorem"></v-checkbox>
        <v-checkbox label="testing super long label text here this is long"></v-checkbox>
      </div>
    </div>
  </v-app>
</div>

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