overflow:hiddenを設定したときに子要素のさらに子要素は表示されるようにしたいです。

###前提・実現したいこと
ここに質問したいことを詳細に書いてください
親要素「product_slide」にoverflow:hiddenを指定しているので、その子要素「inner_product」が領域を超えた場合、表示されないのは大丈夫なのですが、その子要素「p_area」のさらに子要素「flow_area」が超えてしまった場合表示されないので、「flow_area」は超えても表示されるようにしたいです。

ソースコードを載せています。冗長部分も多くあると思いますが、よろしくお願いします。

###該当のソースコード

HTML
1<!-- 省略 -->
2<body>
3
4	<div class="product_area">
5		<div class="product_slide">
6			<div class="left_arrow"><p>&lt</p></div>
7			<div class="right_arrow"><p>&gt</p></div>
8
9			<div class="inner_product">
10				<div class="p_area">
11					<div class="rank"><p>1位</p></div>
12					<div class="title_img"></div>
13					<div class="title_area"><p>タイトルタイトルタイトル</p></div>
14
15					<div class="flow_area">
16						<div class="inner_flow">
17							<div class="up_title">
18								<p>タイトル</p>
19							</div>
20							<div class="up_point">
21								<p class="star"></p>
22								<p class="time">120分</p>
23							</div>
24							<div class="cast_area">
25								<p class="cast">キャスト</p>
26								<ul class="cast_name">
27									<li>名前たろう</li>
28									<li>名前たろう</li>
29									<li>名前たろう</li>
30									<li>名前たろう</li>
31									<li>名前たろう</li>
32									<li>名前たろう</li>
33								</ul>
34							</div>
35							<br style="clear:both;">
36
37						<div class="watch_move">
38							<p><a href="">動画を見る</a></p>
39						</div>
40
41						<div class="tag">
42							<ul class="tag_list">
43								<li>ドラマ</li>
44								<li>1990年</li>
45								<li>あ行</li>
46							</ul>
47						</div>
48						</div>
49					</div>
50				</div>
51				<div class="p_area">
52					<div class="rank"><p>2位</p></div>
53					<div class="title_img"></div>
54					<div class="title_area"><p>タイトルタイトルタイトル</p></div>
55				</div>
56				<div class="p_area">
57					<div class="rank"><p>3位</p></div>
58					<div class="title_img"></div>
59					<div class="title_area"><p>タイトルタイトルタイトル</p></div>
60				</div>
61				<div class="p_area">
62					<div class="rank"><p>4位</p></div>
63					<div class="title_img"></div>
64					<div class="title_area"><p>タイトルタイトルタイトル</p></div>
65				</div>
66				<div class="p_area">
67					<div class="rank"><p>5位</p></div>
68					<div class="title_img"></div>
69					<div class="title_area"><p>タイトルタイトルタイトル</p></div>
70				</div>
71				<div class="p_area">
72					<div class="rank"><p>6位</p></div>
73					<div class="title_img"></div>
74					<div class="title_area"><p>タイトルタイトルタイトル</p></div>
75				</div>
76
77				<div class="more_b"><p><a href="">すべて見る</a></p></div>
78			</div>
79		</div>
80	</div>
81</body>

###該当のソースコード

CSS
1		.product_area{
2			width:700px;
3			height:350px;
4			margin:200px 0 0 300px;
5			position: relative;
6
7		}
8		.product_slide{
9			width:100%;
10			height:100%;
11			overflow: hidden;
12		}
13		.inner_product{
14			width:1300px;
15			height:100%;
16			transition: all .5s ease-in-out;
17			position: relative;
18			z-index: 1;
19
20			/*transform: translate(-1075px,0px);*/
21		}
22		.p_area{
23			width:180px;
24			height:100%;
25			float:left;
26			margin-right:15px;
27			position: relative;
28		}
29
30		.p_area .rank p{
31			width:50px;
32			height:30px;
33			margin:0 0 5px 0;
34			color:#333;
35			font-weight: bold;
36			line-height: 30px;
37			text-align:center;
38		}
39		.p_area .title_img{
40			width:100%;
41			height:250px;
42			background:gray;
43		}
44		.p_area .title_area{
45			width:100%;
46			height:50px;
47			text-align: left;
48			font-size:11px;
49			background: #D4D4D4;
50			margin-top:8px;
51		}
52		.title_area p{
53			width:95%;
54			height:100%;
55			margin: 0 auto;
56			overflow: hidden;
57			text-overflow: ellipsis;
58
59		}
60		.more_b{
61			width:90px;
62			height:40px;
63			background: black;
64			float:left;
65			position: absolute;
66			bottom:10px;
67			right:30px;
68		}
69		.more_b p{
70			margin: 0;
71			width:100%;
72			height:100%;
73			text-align: center;
74			line-height: 40px;
75		}
76		.more_b p a{
77			width: 100%;
78			height:100%;
79			display: inline-block;
80			text-decoration: none;
81			color:white;
82
83
84		}
85		.right_arrow,.left_arrow{
86			width:100px;
87			height:200px;
88			position: absolute;
89			transition: all .5s ease;
90			z-index: 5;
91			box-shadow:0 0 5px black;
92
93
94
95		}
96		.right_arrow{
97			right:-50px;
98			top:70px;
99
100		}
101		.left_arrow{
102			left:-110px;
103			top:70px;
104			opacity: 0;
105
106		}
107		.right_arrow p,.left_arrow p{
108			width:100%;
109			height:100%;
110			line-height: 200px;
111			font-size: 50px;
112			font-weight: bold;
113			background: rgba(200,200,200,0.5);
114			color:#333;
115			text-align: center;
116			margin: 0;
117			cursor: pointer;
118			transition:all .3s ease;
119
120
121		}
122		.right_arrow p:hover,.left_arrow p:hover{
123			background: rgba(150,150,150,0.9);
124			color:#eee;
125			transition:all .3s ease;
126
127		}
128	.flow_area{
129		position: absolute;
130		top:0;
131		left:-270px;
132		width:250px;
133		height:400px;
134		border:1px solid black;
135		box-sizing: border-box;
136	}
137	.flow_area .inner_flow{
138		width:100%;
139		height:100%;
140		position: relative;
141	}
142	.inner_flow:after{
143		content: '';
144		display: inline-block;
145		border-right:10px solid transparent;
146		border-left:10px solid transparent;
147		border-bottom:20px solid black;
148		position: absolute;
149		top:50px;
150		right:-20px;
151		transform:rotateZ(90deg);
152	}
153	.inner_flow:before{
154		content: '';
155		display: inline-block;
156		border-right:7px solid transparent;
157		border-left:7px solid transparent;
158		border-bottom:18px solid white;
159		position: absolute;
160		top:51px;
161		right:-16px;
162		transform:rotateZ(90deg);
163		z-index: 3;
164	}
165	.up_title{
166		width:100%;
167		height:60px;
168		border-bottom:1px gray dotted;
169
170	}
171	.up_title p{
172		width:98%;
173		height:50px;
174		line-height: 25px;
175		margin: 0 auto;
176		margin-top:10px;
177		text-align: left;
178
179	}
180	.up_point{
181		width:100%;
182		height:30px;
183		border-bottom:1px dotted gray;
184	}
185	.up_point .star,.up_point .time{
186		width:60%;
187		height:100%;
188		float:left;
189		background: #333;
190		margin: 0;
191	}
192	.up_point .time{
193		background: #eee;
194		width:40%;
195		text-align: center;
196		line-height: 30px;
197	}
198	.cast_area{
199		width:100%;
200		margin-top:5px;
201	}
202	.cast_area .cast{
203
204		width:70px;
205		height:30px;
206		margin: 0;
207		text-align: center;
208		line-height: 30px;
209		margin-left:5px;
210		background:#aaa;
211		font-size: 12px;
212	}
213	.cast_name{
214		width:98%;
215		margin: 0 auto;
216		margin-top: 5px;
217		padding:0;
218		text-overflow: wrap;
219
220	}
221	.cast_name li{
222		width:auto;
223		list-style-type: none;
224		float:left;
225		margin-left:5px;
226		font-size: 13.5px;
227		line-height: 30px;
228
229	}
230	.watch_move{
231		width:100%;
232		height:30px;
233	}
234	.watch_move p{
235		width:150px;
236		height:100%;
237		margin: 0 auto;
238		margin-top:10px;
239		border:solid 1px black;
240		text-align: center;
241		line-height: 30px;
242	}
243	.watch_move p a{
244		width:100%;
245		height:100%;
246		display: inline-block;
247		color:black;
248		text-decoration: none;
249	}
250	.tag{
251		width:100%;
252		height:30px;
253		margin-top:15px;
254	}
255	.tag_list{
256		width:90%;
257		height:100%;
258		margin: 0 auto;
259		padding:0;
260
261	}
262	.tag_list li{
263		width:60px;
264		height: 20px;
265		line-height: 20px;
266		float:left;
267		margin-left: 10px;
268		border:solid 1px black;
269		list-style-type:none;
270		font-size:12px;
271		text-align: center;
272	}
273

###該当のソースコード

Javascript
1		let right_arrow = document.querySelector(".right_arrow");
2		let left_arrow = document.querySelector(".left_arrow");
3		let inner_product = document.querySelector(".inner_product");
4
5		right_arrow.addEventListener("click",function(){
6			inner_product.style.transform = "translate(-580px,0px)";
7			left_arrow.style.opacity = "1";
8			right_arrow.style.opacity = "0";
9
10		},false);
11		left_arrow.addEventListener("click",function(){
12			inner_product.style.transform = "translate(0px,0px)";
13			left_arrow.style.opacity = "0";
14			right_arrow.style.opacity = "1";
15		},false);
16