今まではJSなどで親要素の幅を取得してそれを設定して～～
とやっていたが、とても参考になるサイトを発見。

https://moriawase.net/horizontal-scroll

上記のサイトだとinline-blockを利用しているがflexで出来たら良いね？って思ったら出来た。
inline-blockの要素間の隙間調整がめんどくさいなと思ったけど解決。

.parent-parent{
overflow-x: auto;
}
.parent{
display: flex;
white-space: nowrap;
}
.child{
お好きなように
}

多分これでいける。

参考サイト様　ありがとうございました。