0

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

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Tyler Sells
  • 463
  • 4
  • 16
  • As a response to a comment of yours below, there is nothing wrong with absolute positioned elements, and in a menu/submenu structure one often need to use them. I posted an answer for you, showing a simple solution that works cross browser – Asons Aug 16 '17 at 07:19

3 Answers3

2

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
1

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.

Chava Geldzahler
  • 3,605
  • 1
  • 18
  • 32
  • Much appreciated. I'll mark this as the answer since it does provide a solution for the problem as described. However, I'm not 100% sure I can use it to fix the real problem I'm having. I used absolute positioning because I need the sub menu to exist essentially separately from it's parent list item. I will mull over some ideas for rewriting the nav and see if I can incorporate this. From your comment, it seems that absolutely positioned items aren't such a good idea anyway – Tyler Sells Aug 16 '17 at 05:05
0

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

Matthew Barbara
  • 3,792
  • 2
  • 21
  • 32