Html 弹性项目赢得'；当引入第二个flex项时，不会消耗容器中的可用空间

我有一个名为

#center

的容器，我想在其中显示

画布

，其中有一个

按钮

。我希望

canvas

对象占据所有可用空间（关于容器中的按钮）

这是我的代码：

html，正文{
宽度：100%；
身高：100%；
}
#容器{
显示器：flex；
身高：100%；
背景颜色：蓝色；
}
.街区{
弹性：1；
}
#左{
背景颜色：绿色；
}
#居中{
显示器：flex；
弹性：1；
柔性包装：包装；
调整内容：灵活启动；
}
#对{
背景颜色：橙色；
}
#canvasObject{
显示：块；
保证金：0自动；
边框：1px实心；
背景颜色：黄色；
}

左边
您的浏览器不支持画布。
点击
赖特

问题在于行方向flex容器上有

对齐内容：flex start

：

#center {
    display: flex;
    flex: 1;
    flex-wrap: wrap;  
    align-content: flex-start;    /* <-- source of the problem */
}

---

W3C参考资料：

#center {
    display: flex;
    flex-direction: column;        /* new; stack flex items vertically */
    flex: 1;
    flex-wrap: wrap;  
    /* align-content: flex-start;  <-- remove; not necessary */
}

#canvasObject {
    flex: 1;                        /* new; consume all available free space */
    /* display: block;              <-- remove; not necessary */
    /* margin: 0 auto;              <-- remove; not necessary */
    border: 1px solid;
    background-color: yellow;
}