title: Why does "align-items: baseline" not working in internet explorer?
body: <p>I am having trouble creating a consistent flexbox between Chrome, Edge, IE and Firefox in my VUE application. The css I have works great in Chrome, Edge and Firefox but fails for Internet Explorer 11 .</p>
  <p>I have a header in which I show two containers, one of them wrapping two logos and the other container wraps a list of links and dropdowns with links.
  here a simplified outline of my template</p>
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div&gt;
              &lt;header&gt;
                  &lt;nav class=&quot;navbar navbar-expand-lg navbar-light header&quot; v-if=&quot;!paymentIsSelected&quot;&gt;
                    &lt;div class=&quot;branding-wrapper&quot;&gt;
                      &lt;a v-bind:href=&quot;this.url&quot;&gt;
                      &lt;div class=&quot;logo-icon&quot;&gt;
                      &lt;svg role=&quot;img&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 114.4 129.32&quot;&gt;&lt;/svg&gt;
                      &lt;/div&gt;
                      &lt;div class=&quot;logo-text&quot;&gt;
                       &lt;svg role=&quot;img&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 278.41 53.09&quot;&gt;&lt;/svg&gt;
                      &lt;/div&gt;
                      &lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;collapse navbar-collapse justify-content-center&quot; id=&quot;navbarNav&quot;&gt;
                       &lt;ul class=&quot;navbar-nav menu&quot;&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;&lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;&lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;&lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;&lt;/li&gt;
                          &lt;li class=&quot;nav-item&quot;&gt;&lt;/li&gt;
                       &lt;/ul&gt;
                    &lt;/div&gt;
                 &lt;/nav&gt;
              &lt;/header&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  &lt;/template&gt;
  
  </code></pre>
  <p>and here's mi css</p>
  <pre><code>.header {
    display: flex;
    justify-content: space-between;
    align-items: baseline !important;
    flex-wrap: nowrap;
    align-items: flex-end;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    width: 100vw;
    max-width: 1200px;
  }
  
  .branding-wrapper {
    display: block;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }
  
  .branding-wrapper a {
    text-decoration: none;
  }
  
  .branding-wrapper .logo-icon {
    width: 60px;
    margin-right: -25px;
  }
  
  .branding-wrapper .logo-text {
    width: 150px;
  }
  
  .branding-wrapper .logo-icon,
  .branding-wrapper .logo-text {
    display: inline-block;
  }
  
  .branding-wrapper .logo-icon svg, 
  .branding-wrapper .logo-text svg {
    display: block;
    max-width: 100%;
    fill: $secondaryColor;
  }
  
  </code></pre>
  <p>in addition to not applying the &quot;align-items: baseline&quot; In the &quot;branding-wrapper&quot; container, I apply an inline-block to both logos and they are shown aligned at the bottom in all browsers except IE.</p>
  <p>I have searched for other references to the subject and I have tried to declare a height to the header as indicated but it doesn't work and also to include a script in the index.html but it doesn't work either.</p>
  <p>What am I doing wrong?</p>
  <p>Thanks for your time and help.</p>