CSS flex basis not working on IE

Question

I have a codepen here - https://codepen.io/ttmtsimon/pen/jadyWW?editors=1100

I have a simple nav style layout, with links and a select menu.

On smaller screen I want the select menu to sit on it's own on the bottom and be 100% width

I have this worjing using flex and flex order and basis.

My problen is IE, the layput doesn't work at all (I dont have access to IE, but I've been told)

I think it's the way IE handles the basis.

Is there a way to fix this layout to work in IE using flex.

<section class="nav-bar">

    <div class='o-container '>

        <div class='nav-bar__items'>

            <div class="nav-bar__items-linkOne">
                <div class="">
                    <span>Link One</span>
                </div>
            </div>

            <div class="nav-bar__items-linkTwo">
                <span>Link Two</span>
            </div>

            <div class="nav-bar__items-linkThree">                
              <span class="o-svg-text__text-left">Link Three</span>   
            </div>

            <div class="nav-bar__items-select">
                <div>
                <span>Select: </span>
                    <select>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                    </select>
                </div>
            </div>

        </div>

    </div>

</section>

Asons · Accepted Answer · 2017-12-02T15:24:03.407

Simply remove justify-content: flex-end; from the &__items rule.

The reason is that IE does not like when one combine justify-content and auto margins, so by removing it, it works fine cross browsers.

Updated codepen

Stack snippet

.o-container {
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}

.nav-bar {
  background-color: lightgreen;
  padding: 16px 0;
  width: 100%;
}
.nav-bar__items {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: flex-end;             removed  */
  min-height: 40px;
}
.nav-bar__items-linkOne {
  margin-right: auto;
}
.nav-bar__items-linkThree, .nav-bar__items-linkTwo {
  padding-left: 8px;
}
.nav-bar__items-linkTwo {
  padding-right: 8px;
  margin-left: 20px;
}
.nav-bar__items-select {
  display: block;
  flex-basis: 100%;
  margin-top: 20px;
}
.nav-bar__items-select select {
  width: 100%;
}

@media (min-width: 1366px) {
  .o-container {
    max-width: 1366px;
  }
}
@media (min-width: 918px) {
  .nav-bar {
    order: 1;
    padding: 10px 0;
  }
  .nav-bar__items {
    order: 1;
  }
  .nav-bar__items-linkThree, .nav-bar__items-linkTwo {
    order: 3;
  }
  .nav-bar__items-linkTwo {
    order: 3;
  }
  .nav-bar__items-linkThree {
    order: 4;
  }
  .nav-bar__items-select {
    flex-basis: auto;
    order: 2;
    margin-top: 0;
  }
  .nav-bar__items-select select {
    width: 350px;
  }
}

<section class="nav-bar">

    <div class='o-container '>
        
        <div class='nav-bar__items'>

            <div class="nav-bar__items-linkOne">
                <div class="">
                    <span>Link One</span>
                </div>
            </div>

            <div class="nav-bar__items-linkTwo">
                <span>Link Two</span>
            </div>

            <div class="nav-bar__items-linkThree">                
              <span class="o-svg-text__text-left">Link Three</span>   
            </div>

            <div class="nav-bar__items-select">
                <div>
                <span>Select: </span>
                    <select>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                      <option>Select Option here</option>
                    </select>
                </div>
            </div>

        </div>

    </div>

</section>

CSS flex basis not working on IE

1 Answers1