FlexBox container isn't holding my div, can someone provide me an answer as to why
Question
Hi, I was working on a school project I needed to create a canvas that fills all the remaining width but upon creating the flex box container my chat div wont join/enter the flexbox.
#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>I have no idea what is wrong with this but this is my first time using flex box I couldn't find anyone else with a similar problem
2 answers
solution1
0 2021-11-06 22:36:32
From what I can see you have a lot of positioning going on that is somewhat unneeded when using flexbox. Ill give you a basic example. First I set all objects to box sizing border-box to help when using percentages. Position your container with position fixed and place it on the top right (you already have this done). Make it display flex and give it a flex direction of column so the objects stack on top of each other. Give it a height and width. I use vh(viewport height) and vw(viewport width). Next your message area will have a property called flex-grow that is set to 1. This allows it to take up all the remaining available space. Next set the height on your chat container I set mine to 25 viewport height. This means your message area will take up all but 25% of the viewport height. Then I just set the height and width of the chat textarea to 100% and since it now uses border-box box sizing it will just fill the container.
Flexbox and Grid are there to help you position objects while keeping them in the flow of the document so be careful when using position absolute when trying to move objects around. Here is a really good guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and here is more information on positioning. Take a good look at how absolute moves objects out of the normal flow of the document 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>
solution2
0 2021-11-06 23:01:07
Incase the first answer does not help Ill give you an example on how to position objects using flexbox. This keeps objects in the flow of the document and manipulates their position using display flex, flex direction and flex grow.
body { margin: 0; padding: 0; } .wrapper { display: flex; height: 100vh; width: 100vw; } .remaining-area { flex-grow: 1; background-color: #f2f2f2; } .chat-area { width: 30vw; height: 100vh; display: flex; flex-direction: column; } .message { flex-grow: 1; background-color: #ccc; } .chat { height: 25vh; }
<div class="wrapper"> <div class="remaining-area"> <p>this area is left empty</p> </div> <div class="chat-area"> <div class="message"> <p>message area</p> </div> <div class="chat"> <p>chat area</p> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.