Why is the image getting chopped?
The image is getting stuck behind the scrolling div, i want it to pop infront of the scrolling div..
<div class="main-content">
<div class="main-content-scroll">
<div class="post">
<img class="post-img" src="profile-img.png">
<div class="post-text">
<h2>TEST </h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
.main-content{
width: 800px;
height: 680px;
position: relative;
}
.main-content-scroll{
max-height: 100%;
overflow-y: auto;
background-color: red;
}
.post {
padding: 20px;
display: flex;
margin-bottom: 20px;
}
.post-img{
margin-top: auto;
margin-bottom: auto;
width: 130px;
margin-right: 20px;
margin-left: -60px;
}
8 Replies
remove the overflow property 🙂
i want it to scroll?
inside .main-content
this doesn't work, i tried to put the img in a div instead but that didnt work either
using padding on the .main-content-scroll works.. i can use that if there's not a better solution
because now the image is not cropped
(as i wanted)
well you are pulling the image to the left, outside the scroll container, so it will get clipped. can not think of anything else than padding on the container or margin on the child
Soon we will have
overflow-clip-margin which will solve this exact use case. Is there a reason you’re putting a scroll onto the top-most container when your body will have this same behaviour is there was no max-height on your .main-content?