Question

以下示例在Chrome中按预期工作，但在Firefox中没有。

页脚高度设置为height:40px，Chrome浏览器正常，但Firefox较小，大约35px。有什么原因吗？

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

Answer 1

原因是Firefox发现textarea略高于Chrome，因此footer没有空间。

它的作用原因很简单，form元素具有预定义的大小，并且浏览器之间的大小通常不同。

所以这里发生的是Firefox调整flex项目并使它们缩小一点以适合他们的父项，不过因为<textarea>不是flex项目，而是flex项目 content ，及其父级.textarea div 元素不允许shrink past content size，footer会缩小。

如果将flex-shrink: 0添加到footer，这将禁止它缩小，则两个浏览器的高度都相同。

要对此进行测试，请更改，例如padding: 5px到padding: 0，footer在两个浏览器中的高度都相同。

Stack snippet

＆＃13;

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

＆＃13;

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

＆＃13;

flexbox flex-direction：textarea列在Firefox中无法正常工作

1 个答案: