1

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>

Improve this question

2 Answers 2

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

It may helpful

Hide scrollbar in browsers (Still scrollable)

/* Webkit */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Firefox */
html {
  scrollbar-width: none;
}
Improve this answer

3 Comments

thought I can do this aswell, but when I set overflow-x to scroll it auto hides the red circle for some reason
jsfiddle.net/kohansalism/e2ru6wnz Can you show me a image what exactly you want?
I want the red circle to be visible without moving it