CSS3 -ms-max-content in IE11 - html

Question

We can set in CSS3 -moz-max-content (for Firefox) and -webkit-max-content (for Chrome, Safari) as width, but it seems -ms-max-content is not working in Internet Explorer (IE11).
Update: Here is a sample code:
.button {
background: #d1d1d1;
margin: 2px;
cursor: pointer;
width: -moz-max-content;
width: -webkit-max-content;
width: -o-max-content;
width: -ms-max-content;
}
<div>
<div class="button"> Short t. </div>
<div class="button"> Looooooong text </div>
<div class="button"> Medium text </div>
</div>

Answer 1

This works on IE11, Chrome and Firefox
instead of
width: -moz-max-content;
width: -webkit-max-content;
width: -o-max-content;
width: -ms-max-content;
I used
width: auto;
white-space: nowrap;

Answer 2

-max-content it is not supported by IE, according to CanIuse.
So I created a fallback for IE that might help you, by setting .button to display:inline-block:
.button {
background: #d1d1d1;
margin: 2px;
cursor: pointer;
width: -moz-max-content;
width: -webkit-max-content;
width: -o-max-content;
/* width: -ms-max-content;*/
}
/* fallback for IE*/
.button {
display: inline-block;
}
<div>
<div class="button">Short t.</div>
<div class="button">Looooooong text</div>
<div class="button">Medium text</div>
</div>
UPDATE: (Based on OP comment)
It's working, but I don't want to display the elements inline.
here is the final answer:
.button {
background: #d1d1d1;
margin: 2px;
cursor: pointer;
width: -moz-max-content;
width: -webkit-max-content;
width: -o-max-content
/* width: -ms-max-content;*/
}
/* fallback for IE*/
.width {
width:100%
}
.button {
display: inline-block;
}
<div>
<div class="width">
<div class="button">Short t.</div>
</div>
<div class="width">
<div class="button">Looooooong text</div>
</div>
<div class="width">
<div class="button">Medium text</div>
</div>
</div>
NEW UPDATE
Nowadays and for awhile there is a cleaner approach to this issue, by simply setting the parent as display: flex, and you even won't need the *-max-content value in width property
.button {
background: #d1d1d1;
margin: 2px;
cursor: pointer;
}
/* the fix */
section {
display: flex
}
<section>
<div class="button">Short t.</div>
<div class="button">Looooooong text</div>
<div class="button">Medium text</div>
</section>

Answer 3

For text elements I tried word-break: keep-all; and it worked for me.

Answer 4

Work for flex div.
I use to change the height of the parent.
.div-parent {
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
position: fixed;
top: -70px;
bottom: 0;
right: 0;
left:20px;
height: 70px;
opacity: 0;
}
.div-children{
display:block;
padding-left:15px;
padding-right:15px;
padding-top:0px;
padding-bottom:0px;
width: 100%;
}
$("<div class='div-children'>Content...</>").appendTo(".div-parent");
var hd=70;
while($('.div-parent')[0].scrollHeight > $('.div-parent')[0].clientHeight){
hd=hd+1;
$('.div-parent').css("height",hd+"px");
}
$('.div-parent').css("top","0");
$('.div-parent').css("opacity","1");