CODEWITHSUNDEEP
htmlcssinternet-explorerflexbox
Tyler Sells
Tyler Sells

Reputation: 503

Justify-content: flex-end works correctly in chrome but aligns based off the the wrong width in IE

The issue I'm having is related to navigation submenus. When I have a sub menu within a list item, I can align it to the right of the list item text or to the left of the list item text. This works perfect in chrome. 

//pseudo code, see codepen link for working example
.wrapper{
    display:flex;
    justify-content:flex-end
}

ul
    li some text
       .wrapper
            ul
                li sub 1
                li sub 2

In chrome, my wrapper is correctly aligned to the right edge of the parent list item. However, in Internet Explorer 11, the parent list item appears to be flexing the .wrapper div based off the combined width of the text within the list item and the width of the .wrapper itself.

Please see this codepen in chrome and then IE for a better explanation of the problem: https://codepen.io/vtsells/pen/qXVjNE

Maybe the way I'm trying to do this is wrong, but if anyone has any ideas, I would greatly appreciate it

Upvotes: 0

Views: 3912

Answers (3)

Asons
Asons

Reputation: 87191

As mentioned, based on that the spec's for Flexbox has changed when it comes to absolute positioned flex items, there is an inconsistency (and bugs) between browsers and how they treat absolute positioned elements.

In this case, simply set position: relative to the wrap and right: 0 to the child, like one would have if they weren't flex items.

Also, if one want the text to not wrap at the width of its parent, add white-space: nowrap.

Updated codepen

* {
  padding: 0;
  margin: 0;
  font-size: 50px;
}
ul {
  display: flex;
  list-style: none;
}
.sub {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
.wrap {
  display: flex;
  position: relative;             /*  added  */
}
.child {
  flex-direction: column;
  position: absolute;
  right: 0;                       /*  added  */
}
li {
  border: 1px solid #333;
}
<ul class="parent"> 
  <li class="sub">example
    <div class="wrap">
      <ul class="child">
        <li>link 1</li>
        <li>link 2</li>
      </ul>
    </div>
  </li>
</ul>

Upvotes: 2

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

The spec for flexbox module has changed from June 2012 to September 2012 with regard to absolutely positioned items, and there are still inconsistencies across browsers in these scenarios.

If you switch to relative positioning instead, IE11 will treat the sub menu list items just like Chrome in terms of it's flexbox properties.

.child{
    flex-direction:column;
    position:relative;
}

This may require more changes in your CSS to get the look you are targeting, however, it will eliminate inconsistencies across browsers.

Open this CodePen (forked from your CodePen above) in Chrome and IE to see the solution.

Upvotes: 1

Matthew Barbara
Matthew Barbara

Reputation: 3962

This might be due to that IE 11 does not fully support display: flex and is prone to bug when using it.

If you need to cater for IE11 I recommend you to use display property in a different way.

You can refer to the following link to check browser compatibility with JS/CSS: http://caniuse.com/#search=flex

Upvotes: 0

Related Questions