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
#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;
}
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. Remove from your textarea and provide height:100% to CSS. https://codepen.io/anon/pen/ZRPQBX?editors=1100#0 Found a fix based on the suggestion by @vaishali-kapadia. I wrapped the #message-input with another div so that the added div is Changed from: To: With the added CSS (though not necessary since the div is Solution 1 You have applied manual height to container. so it stops there after reaching that particular height. Instead apply See this codepen - Solution 2 - See this codepen - https://codepen.io/vaishalik3/pen/ERMPLd?editors=1100#0 Solution 3 See this codepen - https://codepen.io/vaishalik3/pen/RJdqzq?editors=1100#0 Hope this helps :)<html>
My Header
</div>
Send
</div>
</html>
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: fixedbottom: 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
style="height: 100px"
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
display:block and the existing one maintains the flexbox layout.display:block
Send
Send
</div>display:block by default):display:block#message-input-bar {
display:block;
}height: auto; so that container can expand as per the contentheight: auto;
https://codepen.io/vaishalik3/pen/QxoyMd?editors=1100#0
In case you want scrollbar as it is.display: block;flex#message-inputwidth: 100%;textareadisplay: grid;.containerdisplay: flex;#message-input
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.
Really weird code - are you simulating the mobile viewport with all these static height/widths?
– staypuftman
Jul 2 at 13:43