-moz-max-content 不适用于 mozilla firefox

Question

如何让 div 适合 Mozilla Firefox 中的内容？

当新元素添加到 div 中时，使用 -moz-max-content 使 div 适合内容不会影响动态大小。

我尝试了以下方法：

1. 它只作用于高度：450px

.login-container{
   height: auto;
   max-height: 450px;
}

1. Div 获得完整的身体高度

.login-container{
   max-height: fit-content;
   height: -moz-max-content;
}

(1) 给出了预期的结果，但自动将高度设置为最大高度。

(2) div 被拉伸到页面底部。

基本上，我想要一个基于内部元素的动态大小的 div 容器。

Answer 1

-moz-*-content 不适用于height

怎么知道

$('textarea').on('keyup',function(){
  var text = $( this ).val().replace(/\n/g, '<br />');
  text.replace('&#10;','<br/>'); 
  $('div').html(text);
});

div{
  background-color:#00ffff;
  width: 500px;
  height: 50px;
}
div.yourfit{
  background-color:#ff00ff;
  max-width:-moz-max-content;
  max-height:-moz-max-content;
}
div.myfit{
  background-color:#ffff00;
  max-width:-moz-max-content;
  min-height: 50px;
  height:auto;
}

/*Dont care*/
textarea{
  position: fixed;
  width: 90%;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea></textarea>

<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div class="myfit">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="yourfit">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

对于使用内容的动态高度...只使用这个

  min-height: 50px;
  height:auto;