flexbox要素内の固定幅の使用方法は？

Question

私はいくつかのテキスト+ボタン私はタイトルを持っているシンプルなヘッダーを持っているし、最後に次のスタイルで

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

：最初

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

DEMO

（十分な場合をスペース）それはすべて見事に見えますが、サイズを変更して小さくすると、奇妙なことに気付くでしょう。ボタンが小さくなり、テキストがオーバーフローします。

しかし、Safariでは状況が悪化します。ボタンは多かれ少なかれ同じ動作を示しますが、statusテキストがボタンのすぐ下に移動します。この

UPDATEを修正する方法

任意の提案：

クローム：

サファリ：

Answer 1

現在のクロム、Firefoxとエッジで、あなたのコードが意図したとおりに動作するようです。あなたが言及している問題は存在しません。

ただし、IE11とSafariの場合は、ボタン要素にflex-shrink: 0を追加する必要があります。これにより、縮小が無効になります。 https://stackoverflow.com/a/34355447/3597276