Используйте тэг привязки в теге li с помощью flexbox

Question

Я хочу, чтобы якорный элемент имел ширину: 100% внутри тега li с помощью flexbox. Кажется, это не так. Как это сделать? Здесь зеленые границы предназначены для элементов li (# part_1 nav ul li) и белые границы для элементов привязки (# part_1 nav ul li a). Вот HTML:

<nav>
     <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">PORTFOLIO</a></li>
        <li><a href="">ABOUT US</a></li>
        <li><a href="">CONTACT</a></li>
    </ul>
</nav>

И стили:

#part_1 nav {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;

    flex: .15 .15 15%;
    width: 100%;

    background-color: #313030;
}

#part_1 nav ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;

    flex: 0 1 50%;
}

#part_1 nav ul li {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: stretch;

    padding: 0 3%;
    border: 1px solid greenyellow;
}

#part_1 nav ul li a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    flex: 1 0 100%;
    text-decoration: none;
    color: #e0e0e0;

    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 1em;

    border: 1px solid white;
}