Canvas-игра не подходит для родительского div при изменении размера - PullRequest
0 голосов
/ 31 января 2019

У меня есть игра Phaser, которая помещается в элемент div flex.Когда я изменяю размер страницы, flex-flow переключается из режима column в row. Это - это то, что я использовал в качестве примера.В этом примере изменение размера работает, как и ожидалось.

Каким-то образом контейнер игры Phaser не изменяет размеры при сохранении.Вот пример GIF enter image description here В GIF вы можете увидеть, что ширина игры не восстанавливается, когда я увеличиваю ширину экрана.

Здесь вживую демо Исходный код здесь

1 Ответ

0 голосов
/ 31 января 2019

В вашем контейнере есть flex, но у ваших внутренних элементов div нет каких-либо правил, обеспечивающих соотношение между двумя элементами div.для обеспечения соотношения 1: 1 используйте это как для divs

.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 с «большим / широким» содержимым.

...