Html CSS/Flexbox与百分比填充重叠

为什么li项目重叠，并从容器的右侧伸出？我以为flexbox会让这东西更容易？哈哈

我似乎无法使用flexbox正确分发左右两侧带有百分比填充的项目。我不明白什么

请参见我的示例

我正在使用：

<ul>
    <li><a href="" class="btn">Link Text 1</a></li>
    <li><a href="" class="btn">Link Text 2</a></li>
</ul>

---

这与FlexBox无关。你有空白：在前面加上一些填充，这就是为什么你会有重叠。如果您想让填充成为宽度的一部分，请使用框大小：边框框有趣的是，在页面加载时运行代码它不起作用。但是，如果删除a上的填充，让它编译，然后撤消，使其返回原始状态，并让它编译它再次工作。更改百分比值时也会发生同样的情况。@onetrickpony我不明白为什么空白：nowrap是个问题。此外，我通常使用框大小：边框框，但我不认为这会有什么不同，因为这是flexbox？为什么空白声明不将元素推出、填充和所有元素？它不应该增加元素的宽度吗？我认为答案是不使用百分比填充。

a {
    display: inline-block;
    text-align: center;
    color: #3b3c43;
    border: 1px solid #3b3c43;
    border-radius: 4px;
    padding: .75em 15%;
    text-decoration: none;
    font-family: helvetica, arial, sans-serif;
    font-size: .85em;
    white-space: nowrap;
    &:hover {
        color: #fff;
        background-color: #3b3c43;
    }
}
ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    outline: 1px dotted blue;
    width: 80%;
    margin: 1em auto;
}
li {
    outline: 1px dotted red;
}