Autowidth on fixed element don't work on IE11 - css

Question

I am facing an issue on IE11 on a fixed element. That's a context menu that needs to grow horizontally depending on the text inside. This works perfectly on Firefox, Chrome and Safari, but not on IE.
The problem is that on IE11 the right arrow goes down to the next line, instead of growing the line to allow all text be shown.
The following is my code:
* {
box-sizing: border-box;
}
#context-menu {
display: none;
text-align: left;
position: fixed;
z-index: 1000000000;
}
#context-menu ul {
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 1px 1px 3px #444;
text-align: left;
min-width: 150px;
width: auto;
}
#context-menu ul,
#context-menu ul li {
padding: 0;
margin: 0;
position: relative;
display: block;
width: auto;
color: black;
text-align: left;
background-color: #fff;
}
#context-menu ul li {
padding: 5px 10px;
cursor: pointer;
}
#context-menu ul li:hover ul {
z-index: 1;
}
#context-menu ul li:first-child {
border-radius: 3px 3px 0 0;
}
#context-menu ul li:last-child {
border-radius: 0 0 3px 3px;
}
#context-menu ul li .fa {
margin-right: 10px;
width: 15px;
vertical-align: middle;
}
#context-menu ul li.group {
cursor: default;
background-color: #dfdfdf;
font-weight: bold;
}
#context-menu ul > li:not(.group):hover {
background-color: hsla(208, 56%, 53%, 1);
color: black;
}
#context-menu ul > li.submenu::after {
font-family: FontAwesome;
content: "\f105";
margin-left: 15px;
float: right;
}
#context-menu ul> li > ul{
display: none;
}
#context-menu ul > li:hover > ul {
display: block;
position: absolute;
left: 100%;
top: 0;
}
<link href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" rel="stylesheet"/>
<div id="context-menu" style="display: block;">
<ul>
<li><span class="optionText">Long text to show the problem here on the right arrow</span></li>
<li class="submenu"><span class="optionText">Another text</span></li>
<li class="submenu"><span class="optionText">Long text to show the problem here on the right arrow</span>
<ul class="dropdownright">
<li><span class="optionText">Other</span></li>
</ul>
</li>
</ul>
</div>
If you see, if the text is longer than the min-width, it grows on all browsers except IE11, where the arrow goes down to the next line.
How can I make it grow the width automatically ?
Thank you.

Answer 1

Removing the "float: right" in the rule "#context-menu ul > li.submenu::after" seems to be working for me in Internet explorer 11.