使用 column-count 会导致 flex div 将元素分成两半

Question

当使用 column-count 和嵌套的 divs 并设置了 display: flex 时，我最终会得到被切成两半的元素。根据this 的回答，我应该使用display: inline-block 来防止这种情况发生。但是，当我这样做时，我最终会在同一行上出现多行。

在下面的小提琴中，您可以按运行并查看带有和不带有display: inline-block 的问题以及每个问题的问题，以及问题的描述。 （您可能需要按右上角的“整页”才能真正看到问题。）此外，我创建了一个pen 以便于编辑。

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>(Open snippet in larger window to see issues.)</p>
    <button @click="toggleDisplayInlineBlock" class="btn">
      Toggle Display - currently inline block: {{displayInlineBlock}}
    </button>
    
        <div v-if="displayInlineBlock">
      Current display <b>is</b> set to <code>inline-block</code> which fixes the issue of text being cut off, however, when two elements have short labels they end up on the same line like the "testing" and "abc" checkboxes above. "abc" should be on the line below "testing"
    </div>
    <div v-else>
      Current display is <b>not</b> set to <code>inline-block</code> and the rows end up cut off. For example if you hover over some of the checkboxes you will see that they end up highlighting a checkbox in the next column. Additionally, long text should wrap on the <b>same</b> column
    </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>

Answer 1

发布的代码 sn-p 非常接近。我所做的唯一更改是：

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

首先，您需要将子元素设置为inline-block，就像您已经看过的the answer，但是您还需要为子元素提供width。通过设置width: 100%，您的问题就会消失。

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      checkboxes: [],
    }
  },
})

.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 > div {
  display: inline-block;
  width: 100%;
}

.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>    
    <div class="modal">
      <div class="container">
        <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>