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

Question

我有一个 Phaser 游戏，它被放置在 flexbox div 元素中。当我调整页面大小时，flex-flow 从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 提供更多空间。