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

Question

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

在下面的 fiddle 中，您可以按运行并查看有无 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

发布的代码片段非常接近。我所做的唯一更改是：

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

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

Using column-count causes flex div to split the element in half

html

css

flexbox

vuetify.js

column-count