如何让pixi.js应用在flex布局窗口Resize时不产生垂直滚动条？

你的问题出在Pixi生成的canvas元素默认布局行为和div不一致，即使设置了resizeTo: parent，canvas也可能因为自身样式特性，在窗口调整时超出flex容器分配的空间。以下是两种有效的解决方法：

方法一：通过CSS强制canvas遵循父容器的Flex约束 #

修改样式表，给父容器添加定位约束，同时让canvas绝对填充父容器：

body { display: flex; flex-direction: column; height: 100vh; margin: 0; }
#pixi { 
  flex: 1; 
  position: relative; /* 让内部绝对定位元素以它为基准 */
  overflow: hidden; /* 防止canvas意外溢出 */
}
#pixi canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block; /* 消除canvas默认的inline-block间距 */
}

JS部分可保留resizeTo: parent，CSS已强制canvas填充父容器，Pixi的resize逻辑会自动匹配渲染尺寸：

const parent = document.getElementById('pixi')
const app = new PIXI.Application()
await app.init({ background: '#1099bb', resizeTo: parent })
parent.appendChild(app.canvas)

方法二：手动监听Resize事件控制渲染尺寸 #

如果不想依赖CSS定位，可通过JS手动管理canvas尺寸，确保它始终匹配父容器的可用空间：
先调整CSS保证父容器Flex行为正常：

body { display: flex; flex-direction: column; height: 100vh; margin: 0; }
#pixi { flex: 1; }
#pixi canvas { width: 100%; height: 100%; display: block; }

再修改JS逻辑，去掉resizeTo，改用手动监听resize：

const parent = document.getElementById('pixi')
const app = new PIXI.Application()
await app.init({ background: '#1099bb' })
parent.appendChild(app.canvas)

// 初始化和Resize时调整渲染器尺寸
function handleResize() {
  const { width, height } = parent.getBoundingClientRect()
  app.renderer.resize(Math.floor(width), Math.floor(height))
}

window.addEventListener('resize', handleResize)
handleResize() // 初始化时执行一次

这两种方法都能让Pixi应用像原来的div一样，严格遵守Flex布局的空间分配规则，窗口调整时不会出现垂直滚动条。

内容的提问来源于stack exchange，提问作者Georg