FlexBox容器未包含chat div，canvas占剩余宽度实现问题求助

问题核心原因 #

• 你的右侧聊天容器#Right-Box-Wrapper设置了position: fixed，固定定位会让元素完全脱离正常文档流，自然无法参与父容器#screen-wrap的Flex布局计算，会直接固定在视口右侧，不受Flex父级约束。
• #Right-Box-Wrapper内部的#Chat-Wrapper设置了position: absolute，绝对定位同样会脱离当前Flex父容器的布局流，所以不会按照Flex规则排列。
• 你要让canvas占满剩余宽度，需要给#canvas-wrapper添加flex: 1属性，这个属性会让Flex子元素自动填充父容器的剩余可用空间。

具体修改步骤 #

1. 移除#Right-Box-Wrapper的position: fixed、right:0、top:0属性，让它回到正常文档流参与Flex布局
2. 给#screen-wrap添加height: 100vh属性，让它撑满整个视口高度
3. 给#canvas-wrapper添加flex: 1属性，让它自动填充#screen-wrap的剩余宽度
4. 移除#Chat-Wrapper和#message-wrapper的position: absolute相关定位属性，给#Right-Box-Wrapper添加flex-direction: column属性，让内部的消息列表和输入框按照垂直方向排列，给#message-wrapper外层的#mwrap添加flex:1让它占满聊天容器的剩余高度。
5. 给canvas元素添加width: 100%; height: 100%的样式，让它撑满父容器#canvas-wrapper的尺寸。

核心修改后的CSS代码 #

#screen-wrap{
    display: flex;
    flex-direction: row;
    height: 100vh; /* 新增，撑满视口高度 */
}
#Right-Box-Wrapper{
    display: flex;
    flex-direction: column; /* 新增，内部垂直排列 */
    /* 移除 position: fixed; right:0; top:0; */
    width: 320px;
    min-width: 320px;
    height: 100% !important;
    border: 8px solid black;
    border-radius: 10px;
    background-color: #484848;
    box-sizing: border-box; /* 新增，避免边框撑大容器宽度 */
}
#mwrap{
    width: 100%;
    display: flex;
    justify-content: center;
    flex: 1; /* 新增，占满剩余高度 */
    padding: 12px 0; /* 替代原来的top定位 */
    box-sizing: border-box;
}
#message-wrapper{
    /* 移除 position: absolute; top:12px; */
    height: 100%;
    width: 95%;
    background-color: #333333;
    border: 3px solid black; 
    overflow: auto;
    overflow-wrap: break-word;
}
#Chat-Wrapper{
    /* 移除 position: absolute; bottom:0; right:0; */
    z-index: 50;
    width: 100%;
    height: 25%;
}
#canvas-wrapper{
    justify-content: center;
    display: flex;
    min-width: 350px; 
    flex: 1; /* 新增，占满剩余宽度 */
    height: auto; /* 替换固定高度，撑满父容器 */
    background-color: rgb(112, 112, 78);
}
#canv {
    width: 100%;
    height: 100%;
}

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