CSSが実際のスマホとデベロッパーツールで表示が違う

NHML/CSS/JavaScript/jQuery/PHP/MySQLでWEBアプリケーションを作成したのですが、デベロッパーツールでの表示と実際のスマホ(iPhone8)での表示が違って困っています。

具体的には、divで囲った範囲を「overflow-y : scroll」と設定して上下にはみ出た部分をスクロールできるようにしたのですが、デベロッパーでは正常に動作し、実際のスマホではスクロールが起きずに、要素が潰れてしまします。

その様子の画像は以下になります。

その部分のHTMLと、CSSについては以下に示します。
.s-message-area: スクロールしたい領域
.message-content : 文字情報を入れる領域
.message-content > p : 文字情報

CSS
1.message-content {
2  width: 100%;
3  display: flex;
4}
5
6.message-content p {
7  display: inline-block;
8  background: black;
9  color: white;
10  border-radius: 5px;
11  padding: 5px 10px;
12  box-shadow: 0 0 5px black;
13}
14
15.s-message-area {
16  border-radius: 5px;
17  box-shadow: 0 0 2px gray;
18  padding: 20px 5px;
19  margin-bottom: 30px;
20  display: flex;
21  flex-direction: column;
22  flex-wrap: nowrap;
23  overflow-y: scroll;
24  -webkit-overflow-scrolling: touch;
25}