How to force display contents outside its parent container in css - html

Question

I'm trying to create an E-commerce site, I have different categories(phone, computers, etc) and each category has a drop-down box.
My problem is displaying the drop-down contents outside its parent element and still be able to scroll horizontally(overflow-x : auto)
Each time I add an overflow-x:auto;, the drop down list becomes inside of the parent container.
.carte {
position: fixed;
top: 60px;
right: 0;
width: 100vw;
overflow-x: auto;
/*makes drop down boxes(.innerCart ) not visible*/
padding-bottom: 100px;
display: flex;
background: red;
z-index: 1;
}
.category {
position: absolute;
top: 60px;
padding: 5px 0;
margin: 0;
background: #fff;
border-bottom: 1px solid #A8A8A8;
border-radius: 0 0 0 5px;
display: flex;
justify-content: center;
overflow: visible;
}
.cart {
position: relative;
}
.outerCart {
padding: 10px;
margin: 0 7px;
border-radius: 5px;
cursor: pointer;
position: relative;
max-height: 100px;
overflow: hidden;
}
.innerCart {
display: none;
transition: 0.5s;
position: absolute;
top: 100px;
left: 50%;
transform: translate(-50%, 0);
background-color: #fff;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px #BABABA;
width: auto;
max-height: 300px;
overflow-y: auto;
}
.cart:hover .innerCart {
display: block;
}
.innerCart p:hover {
background: #f4f4f9;
color: rgb(59, 56, 56);
}
<div class="carte">
<div class="category" id="categorny">
<div class="cart">
<div class="outerCart">
<img src="/shop/images/phone-icon.png" class="phoneimage">
<p>Phones</p>
</div>
<div class="innerCart">
<p onclick="location.href='phones/android/index.html' ">Android</p>
<div class="line"></div>
<p onclick="location.href='phones/ios/index.html' ">IOS</p>
<div class="line"></div>
<p onclick="location.href='phones/accessories/index.html' ">Accessories</p>
</div>
</div>
<div class="cart">
<div class="outerCart">
<img src="<?php echo $stream?>/images/computer-icon.png" class="phoneimage">
<p>Computers</p>
</div>
<div class="innerCart">
<!-DROP DOWN CONTENT FOR COMPUTERS-->
</div>
</div>
<div class="cart">
<div class="outerCart">
<img src="<?php echo $stream?>/images/electronics-icon.png" class="electronicimage">
<p>Electronics</p>
</div>
<div class="innerCart">
<!-DROP DOWN CONTENT FOR ELECTRONICS-->
</div>
</div>
<div class="cart">
<div class="outerCart">
<img src="<?php echo $stream?>/images/fashion-icon.png" class="clothingimage">
<p>Fashion</p>
</div>
<div class="innerCart">
<!-DROP DOWN CONTENT FOR FASHION-->
</div>
</div>
<div class="cart">
<div class="outerCart">
<img src="<?php echo $stream?>/images/beauty-icon.png" class="clothingimage">
<p>Beauty</p>
</div>
<div class="innerCart">
<!-DROP DOWN CONTENT FOR BEAUTY-->
</div>
</div>
<div class="cart">
<div class="outerCart">
<img src="<?php echo $stream?>/images/vehicle-icon.png" class="vehicleimage">
<p>Vehicles</p>
</div>
<div class="innerCart">
<!-DROP DOWN CONTENT FOR VEHICLES-->
</div>
</div>
<div class="cart">
<div class="outerCart">
<img src="<?php echo $stream?>/images/service-icon.png" class="serviceimage">
<p>Services</p>
</div>
<div class="innerCart">
<!-DROP DOWN CONTENT FOR SERVICES-->
</div>
</div>
<div class="cart">
<div class="outerCart">
<img src="<?php echo $stream?>/images/house-icon.png" class="houseimage">
<p>Housing/property</p>
</div>
<div class="innerCart">
<!-DROP DOWN CONTENT FOR PROPERTY->
</div>
</div>
<div class="cart">
<div class="outerCart">
<img src="<?php echo $stream?>/images/food-icon.png" class="foodimage">
<p>Food/bakes</p>
</div>
<div class="innerCart">
<!-DROP DOWN CONTENT FOR FOODS->
</div>
</div>
<div class="cart">
<div class="outerCart">
<img src="<?php echo $stream?>/images/pet-icon.png" class="foodimage">
<p>Livestock/Pets</p>
</div>
<div class="innerCart">
<!-DROP DOWN CONTENT FOR PETS->
</div>
</div>
<i class="fa fa-arrow-right" id="arrow"></i>
</div>
</div>