水平全宽，垂直弹性盒中溢出
mar*_*ieo 9 html css layout flexbox responsive
我正在尝试创建一个既可以水平滚动又可以垂直滚动的弹性框，以备需要时使用。这是一种 Flexbox 中的表格布局。在下图中，您可以看到我想要实现的概念。当视口不太小或太短时，此功能可以正常工作。
然后我们可以调整视口的大小。这对于垂直溢出是正确的。出现一个滚动条，我们可以向下滚动。遗憾的是，这在水平方向上不能正常工作。我们还得到了水平部分的滚动条。但黄色行（带测试）不是我需要的完整宽度。
const groups = [];
for (let i = 0; i < 15; i++) {
const rows = [];
for (let j = 0; j < 15; j++) {
rows.push({
cols: [
"col 1",
"col 2",
"col 3",
"col 4",
"col 5",
"col 6",
"col 7",
"col 8",
"col 9",
]
});
}
groups.push({
group: 'test' + i,
open: false,
rows
});
}
var app = new Vue({
el: '#app',
data: {
rows: groups
}
}).container {
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 100vh;
}
.header {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
}
.header .col {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 0;
background: red;
padding: 0 2px;
border: 2px solid black;
}
.vertical-content {
display: flex;
flex-direction: column;
}
.vertical-content .grouped-row {
flex-grow: 1;
background: yellow;
border: 2px solid black;
display: flex;
flex-direction: column;
}
.vertical-content .row {
display: flex;
flex-direction: row;
}
.vertical-content .row .col {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 0;
background: blue;
padding: 0 2px;
border: 2px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<body>
<div class="container" id="app">
<div class="header">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
<div class="col">Col 9</div>
</div>
<div class="vertical-content">
<div class="grouped-row" v-for="row of rows" @click="row.open = !row.open">
<div>
{{ row.group }}
</div>
<div class="row" v-for="actualRow of row.rows" v-if="row.open">
<div class="col" v-for="col of actualRow.cols">{{ col }}</div>
</div>
</div>
</div>
</div>
</body>在小提琴中，单击黄色条以展开包含更多内容的行。
如何使黄色条成为全宽而不是部分宽度？
有几个问题：
- 您需要使用 view-width(
vw)min-width。改成。min-width: 100vh;min-width: 100vw;仅此并不能解决问题。 - 主要问题是因为
.header溢出。您可以通过向其和.container元素添加粗边框来检查这一点。我们可以通过两个更改来解决此问题：
.container {
...
width: max-content;
}
.header .col {
...
width: 100px;
}
演示：
const groups = [];
for (let i = 0; i < 15; i++) {
const rows = [];
for (let j = 0; j < 15; j++) {
rows.push({ cols: ["col 1", "col 2", "col 3", "col 4", "col 5", "col 6", "col 7", "col 8", "col 9" ] });
}
groups.push({ group: 'test' + i, open: false, rows});
}
var app = new Vue({el: '#app', data: { rows: groups } })* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
min-width: 100vw;
width: max-content;
}
.header {
position: sticky;
top: 0;
display: flex;
flex-direction: row;
}
.header .col {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 0;
background: rgb(250, 189, 189);
padding: 0 2px;
outline: 2px solid black;
width: 100px;
}
.vertical-content {
display: flex;
flex-direction: column;
}
.vertical-content .grouped-row {
flex-grow: 1;
background: rgb(251, 251, 180);
outline: 2px solid black;
display: flex;
flex-direction: column;
}
.vertical-content .row {
display: flex;
flex-direction: row;
width: 100%;
}
.vertical-content .row .col {
flex-basis: 100px;
flex-grow: 1;
flex-shrink: 0;
background: rgb(150, 150, 238);
padding: 0 2px;
outline: 2px solid black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script>
<body>
<div class="container" id="app">
<div class="header">
<div class="col">Col 1</div>
<div class="col">Col 2</div>
<div class="col">Col 3</div>
<div class="col">Col 4</div>
<div class="col">Col 5</div>
<div class="col">Col 6</div>
<div class="col">Col 7</div>
<div class="col">Col 8</div>
<div class="col">Col 9</div>
</div>
<div class="vertical-content">
<div class="grouped-row" v-for="row of rows" @click="row.open = !row.open">
<div>
{{ row.group }}
</div>
<div class="row" v-for="actualRow of row.rows" v-if="row.open">
<div class="col" v-for="col of actualRow.cols">{{ col }}</div>
</div>
</div>
</div>
</div>