Search code examples
cssinternet-explorerpolyfills

fit-content polyfill for IE

I'm using fit-content for a CSS width in my project. But in IE, it doesn't work, according to this MDN article and this Can I Use. I'm using width: fit-content on a <div>. Is there a polyfill for this? If there is another way without a polyfill, I'd gladly accept that.

My code (severely stripped down):

var i = 0;
setInterval(function(){document.getElementById('total').innerHTML = `${++i} s`}, 1000);
#total {
  position: absolute;
  margin-top: 10px;
  margin-left: 10px;
  font: 300px "Times New Roman";
  border: 1px solid #000;
  max-width: 88.9%;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content; /* Doesn't work in IE */
}
<div id="total">0</div>

Solution

  • Try to remove the width property, by default this property is set to auto.

    Then the div will auto increase, code as below:

    <script type="text/javascript">
    var i = 0;
    setInterval(function () { document.getElementById('total').innerHTML = (++i) + " s" }, 1000);

</script>
<style type="text/css">
    #total {
        position: absolute;
        margin-top: 10px;
        margin-left: 10px;
        font: 300px "Times New Roman";
        border: 1px solid #000;
        max-width: 88.9%;
    }
</style>
<div id="total">0</div>

    The output as below (using IE 11): enter image description here