How to use fix widths inside a flexbox element?

Question

I have a simple header in which I have a title and at the end some text + button:

<header>
    <h1>Lorem ipsum dolor sit amet, consectetu</h1>
    <span class="status">Lorem ipsum dolor</span>
    <button>Lorem</button>
</header>

With the following styling:

header {
    align-items: center;
    justify-content: space-between;
    display: flex;
}
.status {
    white-space: nowrap;
}

DEMO

Initially (if enough space) it all looks fine, but when you resize and make it smaller you'll notice something weird. The button gets smaller and the text will overflow.

However, things get worse in Safari. Although the button shows more or less the same behaviour, but the status text moves to the right beneath button.

Any suggestions how to fix this

UPDATE:

Chrome:

Safari:

Answer 1

In current Chrome, Firefox and Edge, your code seems to work as intended. The problem you mention doesn't exist.

However, for IE11 and Safari you will need to add flex-shrink: 0 to the button element. This will disable shrinking. (An initial setting of a flex container is flex-shrink: 1 on flex items.)

For a more in-depth explanation see the section The flex-shrink factor here: https://stackoverflow.com/a/34355447/3597276