是否可以使用flexbox同时执行“行反转”和“列反转”之类的操作?

在我正在编写的一个应用程序中,我试图创建一个二维网格系统,它可以无限扩展到任何方向。对于那些熟悉LabVIEW的人,我试图模拟用户在VIs的前面板和方框图中无限滚动的能力。

使用flexbox,我成功地使它在向上、向下和向左的方向上正常工作,但向右滚动是有问题的:

网格通过嵌套一个可调整大小的“容器”来工作 div 在固定大小的“视口”内 div :

<template>
  <div class="expandable-grid-viewport" ...>
    <div class="expandable-grid-container" ...>
      <div v-for="tile in tiles" ...>
        <GridSquare .../>
      </div>
    </div>
  </div>
</template>

以下是这些元素样式的硬编码方面:

.expandable-grid-viewport {
  display: flex;
  min-height: 100%;
  min-width: 100%;
  overflow: scroll;
}

.expandable-grid-container {
  position: relative;
  display: flex;
  overflow: hidden;
}

我将网格轨迹设置为与用户滚动的位置相对应的x/y位置,并根据它修改视口的样式:

get viewportStyle() {
  const [viewportWidth, viewportHeight] = this.viewportDimensions;

  return {
    "flex-direction": this.yIndex < 0 ? "column" : "column-reverse",
    "align-items": this.xIndex < 0 ? "flex-start" : "flex-end",
    width: `${viewportWidth}px`,
    height: `${viewportHeight}px`
  };
}

从本质上讲,当我从轴的正方向穿过到负方向(反之亦然)时,我会反转容器扩展的方向,这样视口始终与容器的至少一个角平齐,并且容器从那里向外扩展:

我面临的问题是flexbox只允许我反转行 或 列,但不能同时列出两者。如上面的代码所示,我在 column 和 column-reverse 这让我能够正确处理垂直轴上的滚动,但这会导致GIF中显示的水平滚动出现问题。我可以把它改成 row 和 row-reverse ,在这种情况下,在水平方向滚动效果很好,但在垂直方向滚动效果不好。

有什么办法我能同时做到这两件事吗?除了flexbox,我也尝试过使用CSS网格,但没有太大成功。