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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.