如何解决画布将其他flexbox项目推到容器外部
我正在为手机和网络创建绘图应用程序。 UI结构与随附的代码示例中的相同。我希望画布占用最大可能的空间,而不将其他内容推送到父Flexbox之外。 当前,当我将窗口从纵向模式调整为横向模式时,画布会增大并将其他框推出视图。
首选codepen来检查输出,因为可以在此处轻松调整输出窗口的大小。
body {
margin: 0;
padding: 0;
}
.root {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
overflow: hidden;
}
.header {
flex: 0 0 60px;
background: #ff9;
}
.box1 {
flex: 0 0 20px;
background: #f9f;
}
canvas {
background: black;
max-width: 100%;
max-height: 100%;
}
.canvas-box {
flex: 1 1 400px;
background: #f99;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.box3 {
flex: 0 0 150px;
background: #9ff;
}
.box4 {
flex: 0 0 20px;
background: #9f9;
}
.in-box1 {
flex: 0 0 40px;
height: 100%;
background: #ff0;
}
.in-box2 {
flex: 1 1;
background: #fff;
}
.in-box3 {
flex: 0 0 40px;
height: 100%;
background: #0ff;
}
<div class="root">
<div class="header"></div>
<div class="box1"></div>
<div class="canvas-box">
<div class="in-box1"></div>
<div class="in-box2">
<canvas width="1000" height="1000" />
</div>
<div class="in-box3"></div>
</div>
<div class="box3"></div>
<div class="box4"></div>
</div>
Codepen链接:https://codepen.io/80avin/pen/oNxWyje
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。