Search code examples
cssangularjsinternet-explorer-10flexboxangular-material

Angular Material <span flex/> in IE10 doesn't take up space

I have the following:

<div layout="row">
  <span>Left side</span>
  <span flex/>
  <span>Right side</span>
</div>

where the middle <span flex/> would push the "Right side" to the right. This works great on Chrome, Safari, Firefox, IE11 but not IE10.

The flex attribute from Angular Material looks like to have added the -ms specifics but obviously not working for IE10.

Any suggestions?

Solution

  • The simple solution I've ended up with is to replace <span> with <div>. Instead of:

    <div layout="row">
  <span>Left side</span>
  <span flex/>
  <span>Right side</span>
</div>

    Use:

    <div layout="row">
  <div>Left side</div>
  <div flex/>
  <div>Right side</div>
</div>

    That's working great on IE10.