flexbox align-items致容器不缩放，Canvas自适应失效问题排查

问题原因 #

• 当父容器.container设置display: flex + align-items: center时，Flex子元素.wrapper的宽度会默认收缩至其内容（Canvas）的初始宽度，而非占据容器的可用水平空间。
• 你的缩放逻辑依赖wrapper.clientWidth获取宽度值，但此时.wrapper宽度被固定，窗口 resize 时不会同步变化，导致Canvas无法正常触发自适应缩放。

解决方案 #

通过调整CSS布局，让.wrapper既能占据可用宽度，又能保持内部Canvas居中：

修改后的styles.css #

/* 重置body默认边距，确保容器占满视口 */
body {
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
  align-items: stretch; /* 让子元素占满水平宽度 */
  gap: 5vh;
  min-height: 100vh; /* 确保容器高度覆盖视口，垂直居中生效 */
  padding: 0 20px; /* 可选，避免Canvas贴边 */
}

.wrapper {
  display: flex;
  justify-content: center; /* 内部Canvas水平居中 */
  width: 100%;
  max-width: 90vw; /* 可选，限制Canvas最大宽度，避免过宽 */
  margin: 0 auto; /* 让wrapper自身在container中水平居中（如果设置了max-width） */
}

#myCanvas {
  max-width: 100%;
  height: auto;
}

.images {
  display: flex;
  width: 100%;
  padding: 20px 0;
  height: 1000px;
}

.image {
  border: 1px solid black;
  width: 25%;
  height: 25%;
  margin: 0 10px;
}

.image:hover {
  cursor: pointer;
}

逻辑说明 #

1. 给.container设置align-items: stretch，让子元素（.wrapper和.images）默认占满容器水平宽度，替代原来的align-items: center。
2. 给.wrapper添加display: flex; justify-content: center;，让内部的Canvas在.wrapper范围内水平居中，实现你需要的居中效果。
3. 给.container设置min-height: 100vh和body { margin: 0 }，确保垂直居中在整个视口范围内生效。
4. 可选的max-width: 90vw可以避免Canvas在大屏上过宽，提升体验。

验证效果 #

修改后，窗口resize时.wrapper会随容器宽度同步变化，resizeCanvas函数能正确获取wrapper.clientWidth，Canvas会按预期自适应缩放，同时保持居中状态。

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