html - 在 IE11 中使用 flex 时菜单项重叠-6ren

html - 在 IE11 中使用 flex 时菜单项重叠

转载作者：行者123 更新时间：2023-11-27 23:37:00

这是我的代码 jsfiddle

我的问题是，当窗口的宽度更改为不会溢出的大小时，元素会重叠。

当我使用 chrome 时

screenshot for chrome

当我使用ie时

screenshot for ie

<html>
<head>
    <style>
        ul {
            overflow: scroll;
            display: flex;
        }
        li {
            flex: 1;
            flex-basis: 0px;
            padding: 15px;
            white-space: nowrap;
            list-style: none;
            border: 1px solid;
        }
    </style>
</head>

<body>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item ABCDEF</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
        <li>item 6</li>
        <li>item 7</li>
    </ul>
</body>
</html>