画布游戏在调整大小时不适合父级div

Question

我有一个Phaser游戏，该游戏放置在flexbox div元素中。当我调整页面大小时，弹性流从column切换到row模式。我以This为例。 在该示例中，重新整理按预期进行。

Phaser游戏容器的某种方式不会以保存的方式调整大小。 这是gif示例  在gif中，您可以看到当我增加屏幕宽度时，游戏宽度不会恢复。

这是直播demo 源代码为here

Answer 1

您的容器具有flex，但您的内部div没有任何规则来强制两个div之间的比率。 为了实施1：1的比例，请在两个div上都使用此

.container>div {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 50%;
    height: 50vh;
    color: white;
    font-size: 40px;
}

或简写（不适用于IE）

flex: 1 0 50%;

没有它，浏览器可以根据每个div的内容更改比率-将为具有“更大/更宽”内容的div提供更多空间。