I have created a navbar that displays as expected in Chrome, FireFox, and Edge (logo on left, text and hamburger on right), but it's broken in IE11.

In IE11, the text displays on the left side with the logo immediately on its right. Everything is crammed on the left hand side. When reduced to a mobile size, the text switches to display the hamburger, but then the logo is pushed far to the right and overflows the browser.

Here is my code:

<mdb-navbar SideClass="navbar navbar-expand-sm navbar-light white" [containerInside]="false" >
  <mdb-navbar-brand>
    <a class="navbar-brand" target="_blank" href="https://www.example.com">
    <img src="../../assets/images/logo.svg" alt="Example.com" style="height: 30px;" />
    </a>
  </mdb-navbar-brand>
  <links>
  <span class="navbar-text black-text ml-auto">
  Status Text
  </span>
  </links>
</mdb-navbar>

When I remove the [containerInside]="false" attribute, then it behaves. But I need to remove the container. When I do, there are console errors:

"ERROR TypeError: Object doesn't support property or method 'remove'"

Thinking this was a problem with polyfills, I installed the element-remove NPM package, which seemed to resolve the first error, but now a second appears:

"ERROR TypeError: Unable to get property 'removeChild' of undefined or null reference"

Also, with the polyfill installed, the <links> HTML is completely absent from the DOM.

What can I do / what can be done to resolve this issue?