IE11解决flex-basis和border一起设置不能用的问

需求是实现每行三个，超过就自动换行，这时候一般就用到flex了

ul {
            width: 300px;
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            margin: 0 -2.5px;
            text-align: left;
        }

        li {            
            border: 1px solid #d1cbcb;
            border-radius: 1px;
            box-sizing: border-box;
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: calc(100% / 3 - 5px);
            margin: 0 2.5px 5px;
            text-align: center;
            background: yellowgreen;
        }

<ul>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
</ul>

一般的浏览器都是好的

chrome

但是IE11，却出现了问题

ie with border

找啊找，结果发现是border的问题，去掉border之后就好了，但是border是必须的

ie without border

原因是因为ie上的box-sixing：border-box 是没有用的，所以要改变flex-basis，多减去2个px，左右的border的宽度

flex-basis默认作用在content box上，IE11会忽略box-sizing；https://blog.csdn.net/qq_41635167/article/details/104190865

flex-basis with 2px border size

但是不能为了ie，让别的浏览器小了吧，所以继续找方法

结果在一个日语博客里面找到办法了，再加一个max-width来修好了这个问题，还好学了一丢丢日语可以看懂了，

max-width: 184px; /* ← これを追加 */
https://qiita.com/koppayashi/items/5bec609b111b4a01e197

add max-width to fixes ie11