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 */
}