H5 多个块元素横向滚动问题

工作中遇到的H5 需要4个块级元素在一个窗口内横向滚动 如图
刚开始直接使用css代码对窗口元素书写width: 690px;overflow-x: scroll;之后对其中的每个块级元素进行书写，因为块级元素内需要使用flex布局所以写了display:flex，写完调试发现并没有与想象中的横向滑动符合几个块级元素纵向的排列没有在一行内，如图。
这时想到了使用white-space: nowrap;来使窗口内的元素不换行。但是块级元素内我还想要flex布局，这会导致换行不起作用，这是可以使用display: inline-flex将其变为行内元素进行滚动