line wrap when adding border to an inline-flex container

Question

I was experimenting with flex-basis and accidentally came across an interesting thing. Wrap line when adding border to an inline-flex container. This behavior is the same in Firefox, Chrome and Opera browsers.

Questions:

• Why is there no line wrap in Example 1.1?
• Why is there a line wrap in example 1.2 and 1.3?
• Why is the line wrap when adding border and not when adding padding? ( I suspect that this is spelled out somewhere in the standard )

Thank you.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container:nth-child(1) .flex .item:first-child{
    border: none;
}

.container:nth-child(3) .flex .item:first-child,
.container:nth-child(4) .flex .item
{
    box-sizing:content-box;
}

.flex {
    display: inline-flex;
    align-items: center;
}

.item {
    flex: 0 1 200px;
    padding: 0 5px;
    background: orange;
}

.item:first-child {
    border-right: 1px solid black;
}

<div class="container">
    <h2>1.1 inline-flex (padding)</h2>
    <div class="flex">
        <div class="item">flex: 0 1 200px;</div>
        <div class="item">flex: 0 1 200px;</div>
    </div>
</div>
<div class="container">
    <h2>1.2 inline-flex (border first item + padding + box-sizing: border-box)</h2>
    <div class="flex">
        <div class="item">flex: 0 1 200px;</div>
        <div class="item">flex: 0 1 200px;</div>
    </div>
</div>
<div class="container">
    <h2>1.3 inline-flex (border first item + padding + box-sizing: content-box first item)</h2>
    <div class="flex">
        <div class="item">flex: 0 1 200px;</div>
        <div class="item">flex: 0 1 200px;</div>
    </div>
</div>
<div class="container">
    <h2>1.4 inline-flex (border first item + padding + box-sizing: content-box both item)</h2>
    <div class="flex">
        <div class="item">flex: 0 1 200px;</div>
        <div class="item">flex: 0 1 200px;</div>
    </div>
</div>