overflow scroll hidden but not content - css

Question

Usualy I consider myself decent at css, but now I dont know how to solve this problem. You can see the red circle, my problem is that it is hidden 50%. I need to put overflow-x:scroll and then I dont want to see the scrollbar on y. Is this even possible. I tried to put as little code as possible so I hope its not too hard to go trough. Thanks for any help!
.ak{
width:100%;
height: 125px;
display: -webkit-inline-box;
overflow-x: scroll;
overflow-y:hidden;
margin-top: 30px;
}
.actBox{
width:380px;
height: 125px;
display: flex;
background-color: #F5F5F5;
border-right: 5px solid #FFB26A;
margin-right: 10px;
}
.actCircle{
width: 60px;
height: 60px;
border-radius: 55px;
border: 1px solid rgba(197, 197, 197, 0.2);
background-color: red;
position:relative;
margin-left:-40px;
margin-top:-25px;
}
.actImg{
width: 140px;
background: center center no-repeat;
background-size: cover;
position: relative;
background-position: center;
height: 125px;
}
.actText{
width:240px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tacken{
width: 90%;
height: 30px;
border: double 0.12em transparent;
border-radius: 10px;
background-image: linear-gradient(white, white),
linear-gradient(to right, #FFABAB, #FFB26A);
background-origin: border-box;
background-clip: content-box, border-box;
display:flex;
justify-content:center;
text-align:center;
margin-bottom: 20px;
}
<div class="ak">
<div class="actBox">
<div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
</div>
<div class="actCircle">
</div>
<div class="actText">
<h3>Content </h3>
<h4>Content</h4>
</div>
</div>
<div class="actBox">
<div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
</div>
<div class="actCircle">
</div>
<div class="actText">
<h3>Content </h3>
<h4>Content</h4>
</div>
</div>
</div>

Answer 1

Since you specified a height on your ak element you could just add a new div around the whole thing. In this case lets call it box
.box{
width: 100%;
height: 178px;
overflow-x: scroll;
}
Now you got a new element which i scrollable and just a bit bigger than your first element. Now you could just clearify that you want the overflow-y to be visible at your ak element.
.ak{
width:100%;
height: 125px;
display: -webkit-inline-box;
margin-top: 30px;
overflow-y: visible;
}
And if I understood you correctly the result looks like this:
.box{
width: 100%;
height: 178px;
overflow-x: scroll;
}
.ak{
width:100%;
height: 125px;
display: -webkit-inline-box;
margin-top: 30px;
overflow-y: visible;
}
.actBox{
width:380px;
height: 125px;
display: flex;
background-color: #F5F5F5;
border-right: 5px solid #FFB26A;
margin-right: 10px;
}
.actCircle{
width: 60px;
height: 60px;
border-radius: 55px;
border: 1px solid rgba(197, 197, 197, 0.2);
background-color: red;
position:relative;
margin-left:-40px;
margin-top:-25px;
}
.actImg{
width: 140px;
background: center center no-repeat;
background-size: cover;
position: relative;
background-position: center;
height: 125px;
}
.actText{
width:240px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tacken{
width: 90%;
height: 30px;
border: double 0.12em transparent;
border-radius: 10px;
background-image: linear-gradient(white, white),
linear-gradient(to right, #FFABAB, #FFB26A);
background-origin: border-box;
background-clip: content-box, border-box;
display:flex;
justify-content:center;
text-align:center;
margin-bottom: 20px;
}
<div class = "box">
<div class="ak">
<div class="actBox">
<div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
</div>
<div class="actCircle">
</div>
<div class="actText">
<h3>Content </h3>
<h4>Content</h4>
</div>
</div>
<div class="actBox">
<div class="actImg" style="background-image:url(https://lh3.googleusercontent.com/-NREkKmTtXX0/AAAAAAAAAAI/AAAAAAAAADg/w2IRnCo5AwQ/photo.jpg?sz=48);">
</div>
<div class="actCircle">
</div>
<div class="actText">
<h3>Content </h3>
<h4>Content</h4>
</div>
</div>
</div>
</div>

Answer 2

It may helpful
Hide scrollbar in browsers (Still scrollable)
/* Webkit */
::-webkit-scrollbar {
width: 0;
height: 0;
}
/* Firefox */
html {
scrollbar-width: none;
}