親要素外のメニューが表示されない

CSSで三点リーダーメニューを作っているのですが、メニュー部分が.box外に出てしまうと画面上にメニューが表示されなくなってしまいます。
いろいろ試してみたのですがpositionなどがよくわからず通常のメニューにする方法がわからず質問させていただきました。
画像1が現状で画像2が理想なのですがコードのどの部分が悪さをしてこの様になっているのでしょうか。
詳しい方教えていただけると幸いです。

画像1

画像2

HTML
1
2<div class="box-items">
3  <div class="box">
4    <p>ボックス</p>
5    <div>
6      <div tabindex="0" class="more-button">
7        <span class="material-icons MuiIcon-root" aria-hidden="true"
8          >more_vert</span
9        >
10        <div hidden="" class="menu">
11          <div class="over-layer">
12            <div class="menu-items">
13              <div class="menu-item">削除</div>
14            </div>
15          </div>
16        </div>
17      </div>
18    </div>
19  </div>
20  <div class="box">
21    <p>ボックス</p>
22    <div>
23      <div tabindex="0" class="more-button">
24        <span class="material-icons MuiIcon-root" aria-hidden="true"
25          >more_vert</span
26        >
27        <div hidden="" class="menu">
28          <div class="over-layer">
29            <div class="menu-items">
30              <div class="menu-item">削除</div>
31            </div>
32          </div>
33        </div>
34      </div>
35    </div>
36  </div>
37  <div class="box">
38    <p>ボックス</p>
39    <div>
40      <div tabindex="0" class="more-button">
41        <span class="material-icons MuiIcon-root" aria-hidden="true"
42          >more_vert</span
43        >
44        <div hidden="" class="menu">
45          <div class="over-layer">
46            <div class="menu-items">
47              <div class="menu-item">削除</div>
48            </div>
49          </div>
50        </div>
51      </div>
52    </div>
53  </div>
54  <div class="box">
55    <p>ボックス</p>
56    <div>
57      <div tabindex="0" class="more-button">
58        <span class="material-icons MuiIcon-root" aria-hidden="true"
59          >more_vert</span
60        >
61        <div hidden="" class="menu">
62          <div class="over-layer">
63            <div class="menu-items">
64              <div class="menu-item">削除</div>
65            </div>
66          </div>
67        </div>
68      </div>
69    </div>
70  </div>
71  <div class="box">
72    <p>ボックス</p>
73    <div>
74      <div tabindex="0" class="more-button">
75        <span class="material-icons MuiIcon-root" aria-hidden="true"
76          >more_vert</span
77        >
78        <div class="menu" hidden="">
79          <div class="over-layer">
80            <div class="menu-items">
81              <div class="menu-item">削除</div>
82            </div>
83          </div>
84        </div>
85      </div>
86    </div>
87  </div>
88</div>
89

CSS
1
2.box{
3  background: #ddd;
4  overflow: auto;
5  min-width: 0;
6  padding: 1em;
7  border-radius: 3px;
8}
9
10.box-items {
11  display: grid;
12  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
13  grid-auto-rows: 1fr;
14  grid-gap: 0.8em;
15}
16
17.more-button {
18  display: inline-block;
19}
20
21
22.more-button {
23  cursor: pointer;
24}
25
26.over-layer {
27  position: relative;
28  top: 0;
29  left: 0;
30  right: 0;
31  bottom: 0;
32  background: none;
33  pointer-events: none;
34  z-index: 1002;
35}
36
37.menu-items {
38  position: absolute;
39  -webkit-box-sizing: border-box;
40  box-sizing: border-box;
41  width: 170px;
42  bottom: -10px;
43  right: 35px;
44  height: auto;
45  cursor: pointer;
46  padding: 6px 8px;
47  -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
48  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
49  background: #fff;
50  border-radius: 4px;
51}
52
53.menu-item {
54  border-radius: 2px;
55  padding: 6px 8px;
56  line-height: 19px;
57  height: 22px;
58  margin: 2px 0;
59}
60
61.menu-item:hover {
62  background-color: #f2f3f5;
63}
64