CSS3 -ms-max-content in IE11
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;
-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>