Flexbox дети не полная ширина и высота при использовании границы на родителя

Question

Следующий код (https://jsfiddle.net/mr6tLj0x/)

<div class="wrapper" style="width:200px;">
  <span class="" style="width:67%;" >67%</span>
  <span class="" style="width:33%;">33%</span>
</div>

.wrapper {
  display: flex;
  flex-direction: row;
  border: 1px solid gray;

            > span {
                padding: 10px;
        text-align: center;

                &:nth-of-type(5n+1) {
                    background-color: red;
                }

                &:nth-of-type(5n+2) {
                    background-color: orange;
                }
        }
}

приводит к

Как вы можете видеть, есть некоторые пространство справа и снизу. Почему дети не принимают 100% ширину и рост? Я пытался использовать align-items: stretch; для родителей и flex-grow:1; для детей, но это не помогло.