Canvas 游戏在调整大小时不适合父 div

Question

我有一个 Phaser 游戏，它被放置在 flexbox div 元素中。当我调整页面大小时，flex-flow 从 column 模式切换到 row 模式。是我用作示例的内容。在该示例中，重新调整按预期工作。

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

现场直播demo 源代码是 here

Answer 1

您的容器具有 flex，但您的内部 div 没有任何规则来强制执行 2 div 之间的比率。为了强制执行 1:1 比率，将此用于 divs

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

或 shorthand（不适用于 IE）

flex: 1 0 50%;

如果没有它，浏览器可以根据每个 div 的内容更改比例 - 将为具有 "bigger/wider" 内容的 div 提供更多 space。

Canvas game doesn't fit to parent div while resizing