flexアイテムは
先行するflexアイテムのoutlineの上に乗っかってくる
ということに気づきました
フォーカスでoutlineが表示されるフォーム部品やa要素を
flexboxを使って並べると、
フォーカス時にoutlineが後ろのflexアイテムに隠されてしまいます
(気づきにくいですが、outlineを太く、outline-offsetを大きくすれば分かります)
ChromeでもFirefoxでも同じなので、仕様的なものかと思いますが
マージンを大きめに取るくらいしか解決方法はないでしょうか?