Max-Width:-Webkit-Fit-Content Ie 8 Equivalent

max-width:-webkit-fit-content ie 8 equivalent?

The closest I can think of is floating your elements. Not exactly alike, but probably sufficiently alike;) You need to set extra margin though, but this should be no problem with a conditional stylesheet.

.textbox {
    background-color: yellow;
    float:left;
    clear:left;
}

Your modified fiddle

CSS3 -ms-max-content in IE11

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

Is there a css cross-browser value for width: -moz-fit-content;?

At last I fixed it simply using:

display: table;

How to use -webkit-fill-available on Edge and IE11?

As a workaround, you can try to set the min-width: 100% for the control class.

The min-width: 100% declared at the start will be used by browsers which ignore both the -moz and -webkit-prefixed declarations or do not support -moz-available or -webkit-fill-available.

<!doctype html><html><head><style>.container {  max-width: 200px;  background-color: grey;}
.control {     min-width: 100%;     min-width: -moz-available;               min-width: -webkit-fill-available;       min-width: fill-available;}</style></head><body><div class='container'>  <select class='control' name="cars" id="cars">    <option value="volvo">Volvo</option>    <option value="saab">Saab</option>    <option value="mercedes">Mercedes</option>    <option value="audi">Audi</option>  </select></div></body></html>

Putting -moz-available and -webkit-fill-available in one width (CSS property)

CSS will skip over style declarations it doesn't understand. Mozilla-based browsers will not understand -webkit-prefixed declarations, and WebKit-based browsers will not understand -moz-prefixed declarations.

Because of this, we can simply declare width twice:

elem {
    width: 100%;
    width: -moz-available;          /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    width: fill-available;
}

The width: 100% declared at the start will be used by browsers which ignore both the -moz and -webkit-prefixed declarations or do not support -moz-available or -webkit-fill-available.

width: fit-content; working on Chrome but not explorer

width: fit-content is still in experimental stages, and is currently supported on Chrome 46.x and above (without vendor prefix), FF 3.x and above (with vendor prefix). Not supported on either IE or edge.

You can refer to compatibility chart here: Browser compatibility for width:fit-content

One alternative is to use display: table, which has the same effect as width: fit-content. Of course, there are other ways that you can try depending on what your requirements are.

#fit-content {  width: fit-content;  background: pink;}
#table {  display: table;  background: lightblue;}
#normal {  background: green;}

<div id="fit-content">  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> fit-content</div><div id="table">  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> table</div><div id="normal">  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> normal</div>

Max-Width:-Webkit-Fit-Content Ie 8 Equivalent