fixedで全画面表示にしたいのにiphoneでだけ下の要素が見た目上だけ上にかぶさる

前提・実現したいこと

メールボックスを作っていて、PCでは結構入れ子の深い所にあるdivをスマホ幅では全画面表示にしたくて作っていました。
そしたら他すべてのブラウザで大丈夫なのに、iphoneでだけ表示が崩れてしまいました。
普通にposition:fixed;top:0;height:100vh;の挙動にしたいです。

発生している問題・エラーメッセージ

header-fixed-contents＞msgbox＞main-container＞right-container＞message-new
の構造で、msgboxの直下でmain-containerの兄弟要素にtitle1というのがあり、
msgboxの外側～title1までが「fixedにしてz-indexが一番上のはずの"message-new"」の上部にかぶります。
しかしタップした時の挙動は見た目上で何かがかぶっている部分もmessage-new内のその場所にあるはずのボタンなどが作動します。
思い当たる原因があれば何でも教えてください。

ちなみにmessage-newの兄弟要素に他にもposition:fixed;にしていて変な表示になることなく表示されるdiv（message-body）が存在しており、
cssに大した違いがなさそうなのでそことの差にも困惑です。。。

該当のソースコード

html
1<div id="header-fixd-content" class="wrapper fixed-header" style="padding-top: 176px;">
2　　<div id="msgbox" onclick="" class="retailer-jpn mail-list">
3　　　<div class="title1"></div><!--main-containerと兄弟-->
4　　　<div class="main-container">
5　　　　<div class="right-container">
6　　　　　<div class="mail-new-inner edit-outer">
7　　　　　　一番上に出したい中身
8　　　　　</div>
9　　　　　<div id="message-body"><!--mail-new-innerと兄弟-->
10　　　　　　意図した動きをしてる中身
11　　　　　</div>
12　　　　</div>
13　　　</div>		
14　　</div>
15　</div>
16</div>

css
1#header-fixd-content {
2    padding-top: 0 !important;
3    background-color: #ffffff;
4    left: 0;
5    position: relative;
6    top: 0;
7    width: 100%;
8    z-index: 2;
9    min-height: 100%;
10    height: auto !important;
11    height: 100%;
12    margin: 0 auto -50px;
13}
14#msgbox {
15    height: 100%;
16}
17#msgbox .co-title1 {
18    padding-bottom: 10px;
19    padding-right: 0.3em;
20    width: 100%;
21    padding: 0 2% 3px 2%;
22    margin: 20px auto 0;
23    position: relative;
24    z-index: 1;
25}
26#msgbox .right-container {
27    flex-basis: calc(100% - 205px);
28    margin: 0;
29    border-right: 1px solid #cccccc;
30    border-bottom: 1px solid #cccccc;
31    position: relative;
32    background: #F6F6F6;
33    height: 100%;
34}
35#msgbox .right-container .mail-new-inner {
36    margin: 0;
37    height: 100%;
38    position: fixed;
39    top: 0;
40    bottom: 0;
41    right: 0;
42    transition: right 0.3s;
43    width: 100%;
44    z-index: 10;
45    max-width: 1000px;
46    overflow-y: hidden;
47    background: #fff;
48    display: flex;
49    flex-direction: column;
50    flex-wrap: nowrap;
51}
52#msgbox #message-body {
53    margin-top: 0;
54    height: 100%;
55    position: fixed;
56    top: 0;
57    bottom: 0;
58    right: 0;
59    transition: right 0.3s;
60    width: 100%;
61    height: 100%;
62    line-height: 1.8;
63    z-index: 10;
64    flex-grow: 1;
65    flex-shrink: 1;
66    flex-basis: 57%;
67    background: #F6F6F6;
68    display: flex;
69    flex-direction: column;
70    flex-wrap: nowrap;
71}
72