Element with Left 100% overlaps Container Border

.container {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 60vmin;
    height: 20vmin;
    outline: 0.5vmin solid black;
}
.arrow {
    position: absolute;
    width: 1vmin;
    height: 80%;
    left: 100%;
    background: red;
}

.container {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 60vmin;
    height: 20vmin;
    outline: 0.5vmin solid black;
}
.arrow {
    position: absolute;
    width: 1vmin;
    height: 80%;
    left: 100%;
    background: red;
}