Inconsistencies between Chrome and Firefox have been noticed in the following example.
While the footer height is set to height:40px and appears fine in Chrome, it seems smaller in Firefox, around 35px. Any specific reasons for this difference?
<div class="container">
<div class="textarea">
<textarea placeholder="textarea ..."></textarea>
</div>
<div class="footer">
#footer
</div>
</div>
.container{
display:flex;
height:100px;
background-color:whitesmoke;
flex-direction:column;
}
.textarea{
flex-grow:1;
display:flex;
}
.footer{
background-color:lightseagreen;
height:40px;
color:white;
}
textarea{
flex-grow: 1;
border: none;
resize: none;
padding: 5px;
font-size: 16px;
margin: 0px;
display: block;
}