タイトル通りですがコードペンにあげたので見てください（Bootstrapを使ってますので知らない人は分かりづらいかもしれません）。

フレックスアイテムの中にdivをおいてそこにellipsisを書いても効きません。親のフレックスアイテムにoverflow: hidden;をかける必要があります。かけないと中のdivがまったく縮まないではみ出ます。ちなみにoverflow: auto;でも大丈夫でした。

しかも、中のdivがinline-blockだと、はみ出はしませんが...になりません。blockである必要があります。

Chrome、FireFox、Safariで確認したのでバグではないでしょう。どういう理屈でこうなるのか分かりません。ご存じの方いらっしゃいましたら教えていただけるとうれしいです。

追記(2019/12/13 12:24)

min-width問題を忘れていた。flexアイテムはmin-widthがautoになるんでしたね。コードペンの方を編集しましたが、overflow: hidden;の代わりにmin-width: 0;でもいけました。ただ、中のdivがinline-blockだとmin-width: 0;でも縮まないですね。うーん。多分細かい仕様を聞けば納得いきそうな話ではありますが、ややこしいですね。