具有绝对位置的 Flexbox 容器不适合 IE 中的内容宽度

Question

我是 Flexbox 新手，我的问题如下：

\n\n

我的导航上有一个子菜单，绝对定位并使用弹性盒。

\n\n

在 Chrome / Firefox 中一切正常，没有测试 Safari。

\n\n

IE11 正在显示我的子菜单，但它的子元素溢出（这破坏了我的:hover）。

\n\n

在 IE 中检查此 codepen 以查看问题（简化版本）：

\n\n

https://codepen.io/CamilleVerrier/pen/GvLojN

\n\n

我尝试了 StackOverflow 或 CanIUse 中建议的很多内容，例如单独设置 flex 属性：

\n\n

ul.sub-menu li {\n    flex-grow:0;\n    flex-shrink:1;\n    flex-basis:0px;\n}\n

\n\n

但这似乎不起作用。

\n\n

在我的测试过程中，我发现如果删除position:absolute，一切都会恢复正常（但我的菜单显然会损坏）。

\n\n

那么...是返回 inline-block 还是 float 的解决方案？（请不要啊哈哈）

\n\n

谢谢 ！（抱歉我的英语）

\n\n

\r\n

\r\n

ul.sub-menu li {\n    flex-grow:0;\n    flex-shrink:1;\n    flex-basis:0px;\n}\n

\r\n

/* General styles */\r\n\r\nbody {\r\n  background: tomato;\r\n  font-size: 1.2rem;\r\n  font-weight: bold\r\n}\r\n\r\na {\r\n  color: black;\r\n  text-decoration: none;\r\n}\r\n\r\nli {\r\n  list-style: none;\r\n}\r\n\r\nul li {\r\n  font-size: 1.6rem;\r\n  display: inline-block;\r\n  margin-left: 40px;\r\n  text-transform: uppercase;\r\n}\r\n\r\nul li.menu-metier {\r\n  position: relative;\r\n  padding-bottom: 25px;\r\n}\r\n\r\n\r\n/* SubMenu */\r\n\r\nul.sub-menu {\r\n  display: -webkit-box;\r\n  display: flex;\r\n  display: -ms-flexbox;\r\n  position: absolute;\r\n  background: white;\r\n  top: 45px;\r\n  left: 0;\r\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);\r\n}\r\n\r\nul.sub-menu li {\r\n  margin: 10px;\r\n  flex-grow: 0;\r\n  flex-shrink: 1;\r\n  flex-basis: auto;\r\n}\r\n\r\nul.sub-menu li a {\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\nul.sub-menu li a img {\r\n  padding: 0;\r\n  margin-bottom: 5px;\r\n  align-self: center;\r\n}\r\n\r\nul.sub-menu li a span {\r\n  text-align: center;\r\n  font-size: 1rem;\r\n  align-self: center;\r\n}

\r\n

\r\n

\r\n

\n

Answer 1

该问题与 Flexbox 无关。

这是浏览器之间绝对定位渲染变化的问题。

当您position: relative在一个元素上设置时，它会为带有 的后代设置边界框position: absolute。

在 Chrome 中，绝对定位的后代被允许溢出边界框。

在 IE11 中，它们不是。一旦达到边界框的限制，绝对定位的元素就会被切断。

一种解决方法是position: relative从容器中取出。现在，绝对定位的子菜单具有更大的边界框（基于最近的定位祖先，或者如果不存在，则基于初始包含块（即视口））。

ul li.menu-metier {
   /* position: relative; */
   padding-bottom: 25px;
}

修改后的演示

另一种解决方法是调整right偏移量以适应内容。

ul.sub-menu {
    right: -600px;
}

修改后的演示

您也可以尝试设置宽度。

这些选项都不漂亮。但话又说回来，我们正在处理 IE。

您可以通过搜索找到其他解决方法。