使用列计数会使flex div将元素一分为二

Question

当将column-count与具有display: flex集的嵌套div一起使用时，我最终会得到被切成两半的元素。根据这个答案，我应该使用display: inline-block来防止这种情况发生。然而，当我这样做时，我会在同一行上出现多行。

在下面的fiddle中，您可以按run，查看带有和不带有display: inline-block的问题以及每个问题的问题，以及问题的描述。(你可能需要按右上角的"整页"才能真正看到问题。)此外，我还制作了一支钢笔，以便于编辑。

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，就像您已经看到的答案一样，但是您还需要为子元素提供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>