display: flexで子要素のwidthが効かない問題

下記のようなスタイルだと子要素のwidthが100%にならず、謎の余白が残っていた。

.parentClass {
    display: flex;
    justify-content: center;
    width: 100%;
}

.childClass {
    width: 100%;
}

ブラウザで確認しても特に変なmargin, paddingは設定されていなかったので、GPTに聞いてみるとdisplay: flexとjustify-content: centerを組み合わせると子要素のwidthが効かない場合があると。 果たしてメディアクエリでモバイルだけ削除してみると期待通りに100%で表示された。 こういうエラーが出ない系の意図しない動作は直しにくい。