-moz-max-content does not work for mozilla firefox

Question

How do I fit a div to the contents inside in mozilla firefox?

Making a div fit a content using -moz-max-content does not affect dynamic size, when new elements are added into the div.

I have tried the following:

1. It only acts equally to height: 450px

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

2. Div gets full height of body

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

(1) gives the expected result but automatically sets height to max-height.

(2) div is being stretched to the bottom of the page.

Basically, I want a dynamic sized div container based on the elements inside.

Answer 1

-moz-*-content not worked on height

how to know it

$('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>

For use dynamic height with content... only use this

  min-height: 50px;
  height:auto;