Making image overflow while scrollbar for text is still present - css

Question

An overflow-x, overflow-y pen by CSS Tricks
Hey, does someone have an idea how it may be possible to make the image in this CSS (please use the Codepen link) overflow the box, while overflow-y: scroll is still applied?
<div class="box">
<img src="http://placehold.it/450x150" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Recusandae suscipit, autem magnam ab. Possimus perferendis
officiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Recusandae suscipit, autem magnam ab. Possimus perferendis
officiis doloremque impedit quia quos labore optio quas cum
incidunt.Blanditiis dicta, sunt numquam quos.
</p>
</div>
.box {
border: 1px solid #222;
width: 300px;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}

Answer 1

Here's a way you can do it, albeit a very hacky one. I put position:absolute on the image, which makes it ignore the overflow properties. Then I added a placeholder, which will cover the space the image covers so the text won't get pushed up to where the image is.
.box {
border: 1px solid #222;
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
img {
position: absolute;
top: 0;
}
.placeholder {
display: block;
height: 150px;
width: 450px;
}
<div class="box">
<div class="placeholder"></div>
<img src="http://placehold.it/450x150" alt="" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
</div>
Edit: I just noticed, that in your codepen there is an overflow-x: scroll; while in the question itself it says overflow-y: scroll;. Can you specify which one you mean and tell me if I understood you correctly?
Edit2: I corrected my code snippet to fit to the question.
Edit3: If possible, I recommend taking the image out of the container. This makes the scrollbar visible and also doesn't need any placeholder or additional wrapper of any sort:
.box {
border: 1px solid #222;
width: 300px;
height: 200px;
overflow-x: hidden;
overflow-y: scroll;
}
.placeholder {
display: block;
height: 150px;
width: 450px;
}
<img src="http://placehold.it/450x150" alt="" />
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae suscipit, autem magnam ab. Possimus perferendis officiis doloremque impedit quia quos labore optio quas cum incidunt. Blanditiis dicta, sunt numquam quos.</p>
</div>