html - 证明内容 : flex-end works correctly in chrome but aligns based off the the wrong width in IE

Question

我遇到的问题与导航子菜单有关。当我在列表项中有一个子菜单时，我可以将它对齐到列表项文本的右侧或列表项文本的左侧。这在 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

在 chrome 中，我的包装器正确对齐到父列表项的右边缘。但是，在 Internet Explorer 11 中，父列表项似乎根据列表项中文本的组合宽度和 .wrapper 本身的宽度来调整 .wrapper div。

请在 chrome 中查看此 codepen，然后在 IE 中查看该问题的更好解释:https://codepen.io/vtsells/pen/qXVjNE

也许我尝试这样做的方式是错误的，但如果有人有任何想法，我将不胜感激

Answer 1

如前所述，基于 Flexbox 的规范在涉及绝对定位的 flex 元素时发生了变化，浏览器之间以及它们如何处理绝对定位元素之间存在不一致(和错误)。

在这种情况下，只需将 position: relative 设置为 wrap 并将 right: 0 设置为 child ，如果它们不是 flex 元素，就会有这种感觉。

此外，如果不希望文本以其父级的宽度换行，请添加 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>