小编mar*_*ieo的帖子

水平全宽，垂直弹性盒中溢出

我正在尝试创建一个既可以水平滚动又可以垂直滚动的弹性框，以备需要时使用。这是一种 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
  }
})

Run Code Online (Sandbox Code Playgroud)