大佬教程收集整理的这篇文章主要介绍了如何扩展 div 以适应剩余的视口空间但防止子元素再扩展其大小？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
正如线框所示，我希望 div 占据视口的剩余空间，但不能扩展。
我遇到的问题是我在 div 内渲染了一个画布，比如 800x1000px - 我希望它相应地缩放以适合 div，但发生的事情是我在 div 上获得了垂直滚动。
我已经使用 flexGrow: 1 来扩展 div，但这并没有解决第二个问题。
感谢任何帮助。
我创建了一个可以执行您想要的操作的示例。蓝色元素是画布。如果您想要不同的东西，请告诉我，如果可以，请提供一些代码。它可以在 Chrome、Edge、Firefox 和 Safari 14.0.3 上正常运行（归功于 @Christos Lytras）
body,div {
margin: 0;
padding: 0;
}
body {
height: 100vh;
}
#navbar {
height: 50px;
BACkground-color: lightgrey;
}
#container {
height: calc(100% - 50pX);
display: flex;
}
#sidebar {
width: 70px;
BACkground-color: lightblue;
}
#main {
flex: 1;
}
canvas {
width: 100%;
height: 100%;
display: flex; /*in order to work on Firefox*/
BACkground-color: #3939ff;
}<div id="navbar"></div>
<div id="container">
<div id="sidebar"></div>
<div id="main">
<canvas id="myCanvas" width="100" height="100"></canvas>
</div>
</div>以上是大佬教程为你收集整理的如何扩展 div 以适应剩余的视口空间但防止子元素再扩展其大小？全部内容，希望文章能够帮你解决如何扩展 div 以适应剩余的视口空间但防止子元素再扩展其大小？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。