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

Issue

I built an app and everything is displayed perfectly in Chrome, but if I open the app in Windows Explorer the containers are smaller than they should be.

I'm using width: fit-content. Is this something that only works with Chrome.

How can I make it so that it works with all browsers?

Solution

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>

Answered By - Rocks