CSS3 -ms-max-content in IE11

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-co

Answer 1

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

  
Short t.
  
Looooooong text
  
Medium text

---

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

  

    
Short t.
  
  

    
Looooooong text
  
  

    
Medium text
  

---

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
}

  
Short t.
  
Looooooong text
  
Medium text