Width of textarea and input is different when wrapping in flexbox column - html

Question

I try to setup a multi column contact form by wrapping the texarea into a "second column" using a wrapped flexbox. I expected the textarea to be the same width as the text input. Actually, the text input (first column) is wider than the textarea (second column). In the sample I created on codepen, the difference is e.g. 12px.
In the below example, the textarea is wider than the fieldset. In this example the texarea (and the submit button) is 10px wider than the text inputs, respective the fieldset. Why is one element wider than another when it's wrapped within a flexbox?
In the code a single element should not be higher than the max-height of the entire flexbox.
* {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: column wrap;
max-height: 116px;
}
input[type=text] {
min-width: 0;
padding: 0;
margin: 0;
min-width: 0;
margin-bottom: 1em;
display: block;
width: 100%
}
fieldset {
padding: 0;
margin: 0;
}
textarea {
min-height: 50px;
max-height: 84px;
min-width: 0;
resize: vertical;
}
textarea, input[type="submit"] {
padding: 0;
margin: 0;
}
<form action="/doit" method="post">
<fieldset>
<input type="text" value="Text">
<input type="text" value="Text">
<input type="text" value="Text">
<input type="text" value="Text">
</fieldset>
<textarea>I am wider than the fieldset.</textarea>
<input type="submit" />
</form>
I tried it in Safari (Mojave) and Chrome 85.
Could anyone tell me what causes this behaviour?

Answer 1

The problem still exists in your code. You have set the max-height of your form to 116px (this time). The sum of the heights of input elements and textarea will definitely grow more than 116px and since your flex-wrap is wrap it will turn to a row. So you should not expect them to be of equal width.
If you want your text inputs to be of equal size and be next to each other you must use flex-direction: row. Your code can be something like:
* {
box-sizing: border-box;
}
form {
display: flex;
flex-flow: row wrap;
}
input[type=text] {
min-width: 0;
padding: 0;
margin: 0;
min-width: 0;
margin-bottom: 1em;
display: block;
width: 100%
}
fieldset {
flex:1;
padding: 0;
margin: 0;
}
.textarea {
min-height: 50px;
max-height: 84px;
min-width: 0;
resize: vertical;
}
.submit{
align-self:center;
}
textarea, input[type="submit"] {
padding: 0;
margin: 0;
}
div{
flex:1;
display:flex;
flex-direction:column;
}
<form action="/doit" method="post">
<fieldset>
<input type="text" value="Text">
<input type="text" value="Text">
<input type="text" value="Text">
<input type="text" value="Text">
</fieldset>
<div >
<textarea class="textarea">I am wider than the fieldset.</textarea>
<input class="submit" type="submit" />
</div>
</form>
Note that I have wrapped your textarea and button in a <div> to be child of form element and gave it a flex:1. Then made that <div> a vertical flexbox itself.