Html Canvas将其他flexbox项目推到容器外部
我正在为手机和网络创建一个绘图应用程序。UI结构如所附的代码示例所示。我希望画布在不将其他内容推到父flexbox之外的情况下占据尽可能大的空间。 当前，当我将窗口从纵向模式调整为横向模式时，画布会增长并将其他框推出视图 更喜欢使用codepen检查输出，因为输出窗口可以在那里轻松调整大小Html Canvas将其他flexbox项目推到容器外部,html,css,flexbox,html5-canvas,Html,Css,Flexbox,Html5 Canvas,我正在为手机和网络创建一个绘图应用程序。UI结构如所附的代码示例所示。我希望画布在不将其他内容推到父flexbox之外的情况下占据尽可能大的空间。 当前，当我将窗口从纵向模式调整为横向模式时，画布会增长并将其他框推出视图 更喜欢使用codepen检查输出，因为输出窗口可以在那里轻松调整大小 正文{ 保证金：0； 填充：0； } .根{ 高度：100vh； 宽度：100vw； 显示器：flex； 弯曲方向：立柱； 溢出：隐藏； } .标题{ flex:060px； 背景:#ff9； } .box
正文{
保证金：0；
填充：0；
}
.根{
高度：100vh；
宽度：100vw；
显示器：flex；
弯曲方向：立柱；
溢出：隐藏；
}
.标题{
flex:060px；
背景:#ff9；
}
.box1{
flex:020px；
背景：#f9f；
}
帆布{
背景：黑色；
最大宽度：100%；
最大高度：100%；
}
.帆布箱{
flex:1400px；
背景:#f99；
显示器：flex；
对齐项目：居中；
对正内容：空间均匀；
}
.box3{
柔性：0 150像素；
背景：#9ff；
}
.box4{
flex:020px；
背景：#9f9；
}
.收件箱1{
flex:040px；
身高：100%；
背景：#ff0；
}
.收件箱2{
弹性：1；
背景：#fff；
}
.收件箱3{
flex:040px；
身高：100%；
背景：#0ff；
}