时间戳

首页 > 解决方案 > FlexBox 容器没有容纳我的 div，有人可以回答我为什么吗

javascript - FlexBox 容器没有容纳我的 div，有人可以回答我为什么吗

问题描述

在此处输入图像描述

嗨，我正在做一个学校项目，我需要创建一个画布来填充所有剩余的宽度，但是在创建弹性框容器时，我的聊天 div 不会加入/进入弹性框。

 #Right-Box-Wrapper{
    display: flex;
    position: fixed;
    width: 320px;
    min-width: 320px;
    height: 100% !important;
    right: 0px;
    top: 0px;
    border: 8px solid black;
    border-radius: 10px;
    background-color: #484848;
    }
    #Input-Wrapper{
        display: flex;
        justify-content: center;
    
    }
    #mwrap{
        width: 100%;
        display: flex;
        justify-content: center;
        
    }
    #message-wrapper::-webkit-scrollbar{
        width: 5px;
    }
    #message-wrapper::-webkit-scrollbar-thumb{
        background: black;
        border-radius: 5px;
    }
    #message-wrapper::-webkit-scrollbar-track{
        background: rgb(85, 85, 85);
        border-radius: 5px;
    }
    #message-wrapper{
        top: 12px;
        position: absolute;
        height: 80%;
        width: 95%;
        background-color: #333333;
        border: 3px solid black; 
        overflow: auto;
        overflow-wrap: break-word;
    }
    #a{
        position: fixed;
        height: 100%;
        width: 10px;
        background-color: #262626;
        top: 0px;
        right: 0px;
    }
    #inpbox{
        background-color: #333333;
        position: absolute;
        width: 95%;
        height: 50%;
        top: 80px;
        text-align: left;
        color: whitesmoke;
        border: 3px black solid;
        font-family: sans-serif;
        font-size: 13px;
        resize: none;
    }
    #inpbox::-webkit-scrollbar{
        width: 5px;
    }
    #inpbox::-webkit-scrollbar-thumb{
        background: black;
        border-radius: 5px;
    }
    #inpbox::-webkit-scrollbar-track{
        background: rgb(85, 85, 85);
        border-radius: 5px;
    }
    #inpbox:focus{
        outline: none;
    }
    #Chat-Wrapper{
        position: absolute;
        bottom: 0px;
        right: 0px;
        z-index: 50;
        width: 100%;
        height: 25%;
    }
    .Inputs{
        color: whitesmoke;
        padding-top: 8px;
        padding-bottom:8px;
        padding-right: 3px;
        padding-left: 3px;
        border-top: black solid 2px;
        border-bottom: black solid 2px;
        font-family: sans-serif;
    }
    .Tlc{
        color:red;
        font-weight: 1000;
        padding-top: 8px;
        padding-bottom:8px;
        padding-right: 3px;
        padding-left: 3px;
        border-top: black solid 2px;
        border-bottom: black solid 2px;
        font-family: sans-serif;
    }
    .dice_roll{
        color:greenyellow;
        font-weight: 1250;
        padding-top: 8px;
        padding-bottom:8px;
        padding-right: 3px;
        padding-left: 3px;
        border-top:greenyellow solid 2px;
        border-bottom: greenyellow solid 2px;
        font-family: sans-serif;
    }
    #canvas-wrapper{
        justify-content: center;
        display: flex;
        min-width: 350px; 
        height: 400px;
        background-color: rgb(112, 112, 78);
    }
    #screen-wrap{
        display: flex;
        flex-direction: row;
    }
    body{
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0px;
    }
    #flxt{
        display: flex;
        flex-direction: row;
    }
 <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="site.css">
            <script src="/socket.io/socket.io.js"></script>
            
    
        </head>
        <body>
            <div id = "screen-wrap">
                <div id = "canvas-wrapper">
                    <canvas id = "canv">
                    </canvas>
                </div>
                <div style="background-color: aqua;width: 100px;height: 100px;">
                    <canvas id = "canv">
                    </canvas>
                </div>
                <div id = "Right-Box-Wrapper"> 
                    <div id = "mwrap">
                        <div id = "message-wrapper">
                        </div>
                    </div>
                    <div id = "Chat-Wrapper">
                        
                        <div id = "Input-Wrapper">
                            <textarea placeholder="Type here...." id = "inpbox"></textarea>
                        </div>
                    </div>
                </div>
            </div>
            <div id = "flxt">
                <div style="padding: 10px;background-color: aqua;">
                    asdasdasd
                </div>
                <div style="padding: 10px;background-color: aqua;">
                    asdasdasdasdasd
                </div>
    
            </div>
            <script src="site.js"></script> 
        </body>
    
    
    </html>

我不知道这有什么问题，但这是我第一次使用 flex box 我找不到其他有类似问题的人

标签： javascripthtmlcssflexbox

解决方案

从我所看到的情况来看，在使用 flexbox 时，您需要进行很多定位。我给你一个基本的例子。首先，我将所有对象设置为框大小边框框以在使用百分比时提供帮助。将您的容器定位为固定位置并将其放在右上角（您已经完成了此操作）。使其显示 flex 并为其指定列的 flex 方向，以便对象彼此堆叠。给它一个高度和宽度。我使用 vh（视口高度）和 vw（视口宽度）。接下来，您的消息区域将有一个名为 flex-grow 的属性设置为 1。这允许它占用所有剩余的可用空间。接下来在您的聊天容器上设置高度，我将我的视口高度设置为 25。这意味着您的消息区域将占据视口高度的 25% 以外的所有区域。

Flexbox 和 Grid 可以帮助您定位对象，同时将它们保持在文档流中，因此在尝试移动对象时使用绝对位置时要小心。这是一个非常好的 flexbox 指南：https ://css-tricks.com/snippets/css/a-guide-to-flexbox/ 这里有更多关于定位的信息。好好看看 absolute 如何将对象移出文档的正常流程https://developer.mozilla.org/en-US/docs/Web/CSS/position

* {
  box-sizing: border-box;
}

.chat-container {
 position: fixed;
 right: 0;
 top: 0;
 display: flex;
 flex-direction: column;
 height: 100vh;
 width: 40vh;
}

.message {
  flex-grow: 1;
  background-color: #808080;
  border: 4px solid #000;
  border-bottom: 2px solid #000;
  border-radius: 10px 10px 0 0;
}

.chat {
  height: 25vh;
  border: 4px solid #000;
  border-top: 2px solid #000;
  border-radius: 0 0 10px 10px;
}

.chat-area {
  width: 100%;
  height: 100%;
  background-color: #808080;
  border-radius: 0 0 5px 5px;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #fff;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #fff;
}
<div class="chat-container">
  <div class="message"></div>
  <div class="chat">
    <textarea placeholder="input message here" class="chat-area"></textarea>
  </div>
</div>

推荐阅读