flexbox flex-direction:column with textarea not working as expected in Firefox

Question

The following example works as expected in Chrome but not in Firefox.

The footer height is set to height:40px and in Chrome is ok, however in Firefox is smaller, around 35px . Any reasons why?

https://jsfiddle.net/47gg3fdc/

<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;
}

I think with flex it can take flex-basis into account so sometimes may resize certain elements - I have always found that I have to add min-height and max-heights in if I want it to respect those measurements in all browsers — Pete, Jan 30 '18 at 13:36

Asons · Accepted Answer · 2018-01-30T14:12:32.440

The reason is that Firefox find the textarea somewhat higher than Chrome does, and as such, there is no space for the footer.

And the reason it does, is simply that form elements have predefined size and that size often differs between the browsers.

So what happens here is that Firefox adjust the flex items and make them shrink a little to fit their parent, though as the <textarea> is not a flex item, but flex item content, and its parent, the .textarea div element isn't allowed to shrink past content size, it is the footer that will shrink.

If one add flex-shrink: 0 to the footer, which will disallow it to shrink, it will have the same height in both browsers.

To test this, change e.g. the padding: 5px to padding: 0, and the footer will have the same height in both browsers.

Stack snippet

.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;
  flex-shrink: 0;                  /*  added  */
}

textarea{
   flex-grow: 1;
   border: none;
   resize: none;
   padding: 5px;
   font-size: 16px;
   margin: 0px;
   display: block;
}

<div class="container">
  <div class="textarea">
    <textarea placeholder="textarea ..."></textarea>
  </div>
  <div class="footer">
    #footer
  </div>
</div>

flexbox flex-direction:column with textarea not working as expected in Firefox

1 Answers1