title: How to fix IE layout issue User Interface design (flexlayout, scss and angular)
body: <p>I would like to seek assistance on making a x-browser compatibility UI. Im currently writing a component using angular flexlayout and scss to a certain design..i wanted to achieve this design</p>
  <p><strong>everything renders correctly except for the IE 11</strong></p>
  <p><a href="https://i.stack.imgur.com/WxbV9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WxbV9.png" alt="enter image description here" /></a></p>
  <p>but on IE it is rendering differently. here what it looks like on IE</p>
  <p><a href="https://i.stack.imgur.com/CrsFB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CrsFB.png" alt="enter image description here" /></a></p>
  <p>here;s my template code:</p>
  <pre><code>&lt;div class=&quot;balance-widget__container&quot; matRipple (click)=&quot;onBalanceWidgetClicked()&quot;&gt;
    &lt;div class=&quot;balance-widget__header mat-{{ headerColor }} py-16&quot; fxLayout=&quot;column&quot; fxLayoutAlign=&quot;center center&quot;&gt;{{ headerLabel }}&lt;/div&gt;
    &lt;div class=&quot;ftr-balance-widget__container-details&quot; fxLayout=&quot;column&quot; fxLayoutAlign=&quot;center center&quot;&gt;
      &lt;mat-progress-spinner class=&quot;ftr-balance-widget__container-details-spinner&quot; mode=&quot;determinate&quot; value=&quot;100&quot; [color]=&quot;ringColor&quot; [strokeWidth]=&quot;strokeWidth&quot; [diameter]=&quot;diameter&quot;&gt;&lt;/mat-progress-spinner&gt;
      &lt;div class=&quot;ftr-balance-widget__container-details-values w-100 h-100&quot; fxLayout=&quot;column&quot; fxLayoutAlign=&quot;center center&quot;&gt;
          &lt;div fxLayout=&quot;column&quot; fxLayoutAlign=&quot;center center&quot;&gt;
            &lt;div&gt;30&lt;/div&gt;
            &lt;div&gt;Available&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;ftr-balance-widget__container-details-values-divider px-8 py-8&quot; style=&quot;width:120px;&quot; fxLayout=&quot;row&quot; fxLayoutAlign=&quot;center center&quot;&gt;
            &lt;div class=&quot;ftr-balance-widget__container-details-values-divider-line&quot; fxFlex fxLayout=&quot;column&quot; fxLayoutAlign=&quot;center center&quot;&gt;
            &lt;/div&gt;
            &lt;div class=&quot;ftr-balance-widget__container-details-values-divider-subheader&quot;&gt;{{ subHeaderLabel }}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div fxLayout=&quot;column&quot; fxLayoutAlign=&quot;center center&quot;&gt;
            &lt;div&gt;Balance&lt;/div&gt;
            &lt;div&gt;2333&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>here's the scss:</p>
  <pre><code>.balance-widget__container {
      background-color: $normal-background;
      
      &amp;-details {
          cursor: pointer;
          position: relative;
  
          &amp;-spinner {
              position: relative;
          }
          
          &amp;-values {
              position: absolute;
              left: 0;
              top:0;
              height:100%;
              width:100%;
              margin: auto;
  
              &amp;-divider {
                  position: relative;
  
                  &amp;-line {
                      position: relative;
                      background-color: $primary5;
                  }
  
                  &amp;-subheader {
                      background-color: $normal-background;
                      position: absolute;
                      left:100%;
                  }
              }
          }
      }
  }
  </code></pre>