◆ flexbox で横並べの flex item に flex: 1 1 0
◆ flex item の子要素は flex container を超えるサイズ
  ◆ → flex item も子要素も flex container からはみ出てる
◆ flex item に width: 0 を設定
  ◆ → Chrome のみ flex item が flex container に収まるサイズになる
◆ flex item の flex-basis を auto にする
  ◆ → Firefox も flex item が flex container に収まるサイズになる

あとで書こうとメモファイルに置いたまま忘れてたやつです
気づいたのは数バージョン前の Chrome と Firefox でしたが 今の最新版の 73 と 66 でも変わってませんでした

この記事の最後で書いてる Firefox の違いと原因は多分同じです
この記事では縦方向ですがこっちは横です

こういう HTML があります

<!doctype html>
<style>
#container {
display: flex;
width: 600px;
padding: 10px;
background: #ddd;
}

#left {
background: #ffb1b1;
padding: 10px;
}

#right {
background: #9ef2ff;
flex: 1 1 0;
padding: 10px;
}

#item {
width: 1000px;
background: #fc2;
}
</style>

<div id="container">
<div id="left">LEFT</div>
<div id="right">
<div id="item">RIGHT</div>
</div>
</div>

これだとどっちも同じ表示です

chfxfb-01

しかし #right に width: 0 をつけると

chfxfb-02

Chrome は親のサイズまで広がりますが Firefox では子要素のサイズまで広がります

Firefox でも width: 0 に加えて flex-basis を auto にすれば親サイズまでとなりました
auto にすると width を元に計算されるので width が 0 なら flex-basis に 0 指定と同じ気がしますが この動きを見るに違うようです

一応 MDN を見てみても

  • 元々、flex-basis:auto は "自身の width または height プロパティを参照する" ことを意味していました。
  • その後 flex-basis:auto の意味が自動サイズ設定に変わり、また "自身の width または height プロパティを参照する" キーワードとして "main-size" を導入しました。これは bug 1032922 で実装しました。
  • さらに、この変更が bug 1093316 で戻されて auto が再び "自身の width または height プロパティを参照する" になり、自動サイズ設定を行うための content キーワードを新たに導入しました (content キーワードの追加は バグ 1105111 で扱っています)。

と書いていて width を参照してそうなんですけどねー