Flexbox not expanding with content


Flexbox not expanding with content



I am trying to build a basic messenger view on a mobile screen. So there is a header at the top, a scrollable list of messages in the middle, and a bar at the bottom with a textarea and button to send a new message.



I am using an autosize plugin to makes the textarea expand as a user types their message. The problem is that as it changes the height property, it will start to overflow the height of the container that it is in, instead of that container expanding to take up more room.



A working sample is here: https://codepen.io/jwynveen/pen/RJdWLB?editors=1100#0



enter image description here




#container {
width: 412px;
height: 660px;
border: solid 2px black;
display: flex;
flex-direction: column;
}
#container h1 {
border-bottom: solid 1px gray;
margin-bottom: 0;
padding: 1rem;
}
#container #message-list {
flex-grow: 1;
flex-shrink: 1;
overflow-y: scroll;
}
#container #message-list .message {
margin: 1rem;
padding: 1rem;
border: solid 1px gray;
}
#container #message-input-bar {
display: block;
}
#container #message-input {
padding: 1rem;
display: flex;
border-top: solid 2px red;
}
#container #message-input textarea {
flex-grow: 1;
}


<html>


My Header



This is a dummy message.

This is a dummy message.

</div>


Send

</div>
</html>



If there are no messages in the center area, the textarea makes its container expand as expected. But once the center area has enough to scroll, the textarea starts to overflow.





Really weird code - are you simulating the mobile viewport with all these static height/widths?
– staypuftman
Jul 2 at 13:43





You can easily just dock the message box with a position: fixed + bottom: 0 if it's a true, full viewport answer you're looking for. The reason things are goofy right now is the faux viewport you've added in.
– staypuftman
Jul 2 at 13:44


position: fixed


bottom: 0





Sorry for the static height/width on the container. Yes, I'm simulating a mobile viewport. @staypuftman If I use a fixed position div, I then need a dynamic amount of padding on the message list since the #message-input container is now above the message list, right? Otherwise the user can't see the last messages.
– jwynveen
Jul 2 at 13:51




3 Answers
3



Remove


style="height: 100px"



from your textarea and provide height:100% to CSS.



https://codepen.io/anon/pen/ZRPQBX?editors=1100#0





I am using Autosize (npmjs.com/package/autosize) to set that height so that it expands as users enter more text. With just 100%, it doesn't expand with longer text.
– jwynveen
Jul 2 at 13:52



Found a fix based on the suggestion by @vaishali-kapadia. I wrapped the #message-input with another div so that the added div is display:block and the existing one maintains the flexbox layout.


display:block



Changed from:




Send



To:





Send

</div>



With the added CSS (though not necessary since the div is display:block by default):


display:block


#message-input-bar {
display:block;
}



Solution 1



You have applied manual height to container. so it stops there after reaching that particular height.



Instead apply height: auto; so that container can expand as per the content


height: auto;



See this codepen -
https://codepen.io/vaishalik3/pen/QxoyMd?editors=1100#0



Solution 2 -
In case you want scrollbar as it is.


display: block;


flex


#message-input


width: 100%;


textarea



See this codepen - https://codepen.io/vaishalik3/pen/ERMPLd?editors=1100#0



Solution 3


display: grid;


.container


display: flex;


#message-input



See this codepen - https://codepen.io/vaishalik3/pen/RJdqzq?editors=1100#0



Hope this helps :)





Solution 2 makes some sense, but I would like the send button to float on the right of the text area. However, the width of different users' screens will differ, so how can I consistently size the textarea width with a statically-sized (48px) icon/button to the right of it?
– jwynveen
Jul 2 at 14:00





codepen updated. please check codepen.io/vaishalik3/pen/ERMPLd?editors=1100#0
– vaishali kapadia
Jul 2 at 14:06





That seems to be a decent workaround, but with different viewport sizes, the button won't always be 16% of the width. I'd really like to get the flexbox layout working since it would size the textarea width exactly across viewports. I don't know why the height of that flexbox won't adjust correction though.
– jwynveen
Jul 2 at 14:22





@jwynveen check another method... solution 3 added
– vaishali kapadia
Jul 3 at 8:08






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

PHP contact form sending but not receiving emails

PHP contact form sending but not receiving emails I have created a contact form using PHP to send the data. The form seems to send fine as there are no errors and success message appears, however I am not receving the emails into the designated inbox. I am using PHPMailer as I originally tried just using the php 'mail' command which I now understand is a bit hit and miss. I cannot see why I would not be receving the emails so I would be very grateful for any help that could be given. I'm quite new to PHP so please be patient with me :) <?php use PHPMailerPHPMailerPHPMailer; use PHPMailerPHPMailerException; $msg = ""; if (isset($_POST['submit'])) { require 'phpmailer/src/Exception.php'; require 'phpmailer/src/PHPMailer.php'; require 'phpmailer/src/SMTP.php'; function sendemail ($to, $from, $body) { $mail = new PHPMailer(true); $mail->setFrom($from); $mail->addAddress($to); $ma...
Read more

Do graphics cards have individual ID by which single devices can be distinguished?

Do graphics cards have individual ID by which single devices can be distinguished? I have several graphics cards of the same manufacturer and same model and I want to distinguish them not only by the pcie socket they reside in but by some individual value I can read from the hardware. Is there such value and if so what would it be called and how could I access it? Right now I'm using modern nvidia cards (10xx series) and nvidia inspector.but I'd prefer if there was any value that was also applicable to amd. I have programming and scripting knowledge. I am running Windows 10 1 Answer 1 This is a powershell example to pull information from video cards. The DeviceID is supposed to be unique but only if the manufacturer supports Windows Display Driver Model (WDDM). (I copied this directly from docs.microsoft.com) $strComputer = "." $colItems = get-wmiobject -class "Win32_VideoC...
Read more

iOS Top Alignment constraint based on screen (superview) height

Image
iOS Top Alignment constraint based on screen (superview) height Let's say for example i want my view's top margin be 30 px for iPhone 6s and for the other screen i want to change this constants from 30 to X where X is proportional to total height of screen i.e. 36.5 for iPhone X, 33 for iPhone 6s plus, 25 for iPhone SE And so on .... I know i can take @IBOutlet of NSLayoutConstraint and change it programmatically but what i want is i want to set it like aspect ratio that we have for height width like subview's heigh width is proportional it's superview it changes with super view's height and width @IBOutlet NSLayoutConstraint 2 Answers 2 The constraint you need here is the superView's centerY set multiplier to 0.5 if you want the top anchor's constant to be 0.25 of screen height from the top , so adjust the multiplier according to this logic which is height_of_scre...
Read more