Width-fit content working on Chrome but not explorer

Have similar problem. In one div, have others with display:inline-block

For parent div use white-space : nowrap;

Don't forget to set to child's div white-space : normal;

.parent {
    width: max-content;
    white-space : nowrap;
}
.parent .child {
    display: inline-block;
    white-space : normal;
}

HTML example

<div class='parent'>
  <div class='child'></div>
  <div class='child'></div>
  <div class='child'></div>
</div>

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>

It can be done with width:auto but only when an element is display: inline-block as well as setting the value as right:inherit or left:inherit.

Example:

.my_div {
    width: auto;
    display: inline-block;
    right:inherit; /* align to left */
}