Flexboxで作成した場合、親要素は横幅100%となります。
子要素をinline表示とし、親要素幅を子要素に合わせたい場合のCSS設定をメモしておきます。

どんな状態か、デモをご確認ください。

デモ

子要素に合わせて親要素を横幅可変

See the Pen 親要素の横幅100％ by harumi-sato (@harumi-sato) on CodePen.

子要素に関係なく親要素を横幅100%固定

See the Pen 親要素の横幅、子要素のサイズに可変 by harumi-sato (@harumi-sato) on CodePen.

コード

Flexboxを囲ったblockに inline-blockを指定すると、
子要素がinline-blockの振る舞いとなります

<divclass="parent"><ulclass="item_parent"><liclass="item_child _child1">category1</li><liclass="item_child _child2">category2</li></ul></div>

.parent{display:inline-block;}.item_parent{display:flex;background:lightpink;}.item_child{background:#fff;}

まとめ

親要素が可変する場合、1段上に幅指定用のブロックを作成する。