Flexbox flex-grow property not respected when flex item contains an input element

R

ruit

Guest
I am using flexbox to make a chat UI. First using the flex-grow property I divide the layout in 2 columns with a ratio 2/5 and then I divide those 2 columns in rows with a ratio 1/9 for the first column and 5/1 for the second one. This is what I have when I haven't added the input elements to the HTML code:

https://codepen.io/thenr/pen/PoooyEN


#chat {
display: flex;
width: 100%;
height: calc(100vh - 2em);
overflow-y: hidden;
}

#friends {
flex-grow: 2;
display: flex;
flex-direction: column;
border: 1px solid black;
}

#messages {
flex-grow: 5;
display: flex;
flex-direction: column;
border: 1px solid black;
}

#searchfriend {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 120px;
border: 1px solid black;
background-color: blue;
}

#searchfriend input[type="text"] {
margin: 0;
padding: 1em;
border: 0;
border-radius: 0px;
background-color: #d1d1d1;
}

#friendslist {
flex-grow: 9;
border: 1px solid black;
overflow-y: auto;
}

.friend {
height: 100px;
border: 1px solid black;
}

#chatmessages {
flex-grow: 5;
border: 1px solid black;
}

#writemessage {
flex-grow: 1;
border: 1px solid black;
}

<div id="chat">
<!-- friends -->
<div id="friends">
<div id="searchfriend">

</div>
<div id="friendslist">
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>

</div>
</div>

<!-- chat -->
<div id="messages">
<div id="chatmessages">



</div>
<div id="writemessage">

</div>
</div>
</div>

The problem is that when I add the input elements to the HTML code the ratios I had set are not respected and the flex items containing those input elements make bigger, and I don't want that to happen. Same HTML code but with the input elements added:

https://codepen.io/thenr/pen/RwwweQN


#chat {
display: flex;
width: 100%;
height: calc(100vh - 2em);
overflow-y: hidden;
}

#friends {
flex-grow: 2;
display: flex;
flex-direction: column;
border: 1px solid black;
}

#messages {
flex-grow: 5;
display: flex;
flex-direction: column;
border: 1px solid black;
}

#searchfriend {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 120px;
border: 1px solid black;
background-color: blue;
}

#searchfriend input[type="text"] {
margin: 0;
padding: 1em;
border: 0;
border-radius: 0px;
background-color: #d1d1d1;
}

#friendslist {
flex-grow: 9;
border: 1px solid black;
overflow-y: auto;
}

.friend {
height: 100px;
border: 1px solid black;
}

#chatmessages {
flex-grow: 5;
border: 1px solid black;
}

#writemessage {
flex-grow: 1;
border: 1px solid black;
}

<div id="chat">
<!-- friends -->
<div id="friends">
<div id="searchfriend">
<input type="text" name="" id="searchtext" placeholder="Search friend...">

</div>
<div id="friendslist">
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>
<div class="friend"></div>

</div>
</div>

<!-- chat -->
<div id="messages">
<div id="chatmessages">



</div>
<div id="writemessage">
<form action="" id="formchat">
<input type="text" name="msgtext" id="msgtext" autocomplete="off">
<button id="msgsend">Send</button>
</form>
</div>
</div>
</div>

Continue reading...
 
Top