flex: 1 1 0%布局下canvas子元素无法自适应缩小如何解决

问题原因 #

两个核心原因共同导致了只能放大、无法缩小的问题：

• flex属性配置错误：你给canvas设置的flex: 1 0 0%中，第二个参数为flex-shrink，取值为0代表该flex项禁止被收缩，当父容器空间不足时，该元素不会主动缩小，只会溢出容器触发滚动条。
• canvas的最小高度规则限制：flex布局中flex项的min-height默认值为auto，要求flex项的尺寸不能小于其内容的实际尺寸。你在paint回调中会将canvas的绘图属性width/height（属于元素的内容尺寸）设置为当前的布局尺寸，窗口缩小时，canvas的内容尺寸已经是之前更大的数值，就算放开flex-shrink限制，min-height:auto也会阻止canvas被压缩到小于该内容尺寸，形成无法缩小的死循环。

解决方法 #

修改canvas的flex配置允许收缩，同时添加min-height: 0覆盖默认的最小高度限制即可，修改后的CSS代码如下：

.main {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.canvas {
  /* 把flex-shrink改为1允许收缩，或者直接写flex:1即可，默认就是1 1 0% */
  flex: 1 1 0%;
  /* 新增这行，允许flex项被压缩到小于内容尺寸 */
  min-height: 0;
}

html, body {
  height: 100%;
  margin: 0;
}

如果需要同时兼容水平方向的自适应缩放，可以额外加上min-width: 0。

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