Element is acting as if it has fixed positioning - html

Question

so I've been looking around for the solution to this problem and I haven't been able to find a clear or really any answers at all (maybe I just don't know how to word the question?). So, I'm really going to rely on pictures for this question and then explain what is going on.
Starting position of chrome dev tools
Above is the starting position of the element (the content just above the dev tools). At this position, the elements are functioning as they should, however on resizing the dev tools, the elements move up or down. In the next picture, I increased the size of the dev tools and the elements in question move with the tools.
Expanded size of chrome dev tools
As you can see in the picture above, when I resize the dev tools, the page elements and next button moves almost like it's attached to the dev tools.
What really confuses me is that I haven't used css on any part of the in questioned elements. And what confuses me even more is the fact that no other element on the page reacts the same way as the element in question (which again is the very last elements on the page).
Below is my html and SCSS code:
HTML:
<section class="section__shopping-items quarter-margin">
<div class="item-content flex-wrapper">
<div class="shop-list">
<img
src="../../public/css/img/3-stripes-shorts-black.jpg"
alt="pants"
class="item-img"
/>
<div class="item-info">
<p class="gender-collection">
Women's Originals
</p>
<p class="item--name">3-stripes shorts</p>
<p class="item--price">
$45
</p>
<p class="item--colors">
2 colors
</p>
</div>
</div>
<div class="shop-list">
<img
src="../../public/css/img/3-stripes-shorts-black.jpg"
alt="pants"
class="item-img"
/>
<div class="item-info">
<p class="gender-collection">
Women's Originals
</p>
<p class="item--name">3-stripes shorts</p>
<p class="item--price">
$45
</p>
<p class="item--colors">
2 colors
</p>
</div>
</div>
<div class="shop-list">
<img
src="../../public/css/img/3-stripes-shorts-black.jpg"
alt="pants"
class="item-img"
/>
<div class="item-info">
<p class="gender-collection">
Women's Originals
</p>
<p class="item--name">3-stripes shorts</p>
<p class="item--price">
$45
</p>
<p class="item--colors">
2 colors
</p>
</div>
</div>
<div class="shop-list">
<img
src="../../public/css/img/3-stripes-shorts-black.jpg"
alt="pants"
class="item-img"
/>
<div class="item-info">
<p class="gender-collection">
Women's Originals
</p>
<p class="item--name">3-stripes shorts</p>
<p class="item--price">
$45
</p>
<p class="item--colors">
2 colors
</p>
</div>
</div>
</div>
</section>
<section class="section__next-page quarter-margin">
<div class="flex-wrapper space-flex">
<div class="page--select">
<div class="flex-wrapper">
<p>Page:</p>
<div class="select-page flex-wrapper">
<p class="page--num">1 <span>⌄</span></p>
<p class="page--length">of 9</p>
</div>
</div>
</div>
<div class="page--next">
<button class="next">next</button>
</div>
</div>
</section>
SCSS
// shopping items
.section {
&__shopping-items {
height: 100%;
.item-content {
cursor: pointer;
justify-content: space-between;
overflow: auto;
.shop-list {
border: .1rem solid transparent;
min-width: 25%;
// height: 25%;
img {
width: 100%;
}
.item-info {
// margin: 1rem 1rem 2rem 1rem;
margin: 0 1rem;
.gender-collection {
margin: 1rem 0;
font-size: 1.2rem;
font-weight: 100;
color: $collection-name-font;
}
.item {
&--name,
&--price {
font-weight: 300;
}
&--name {
margin-bottom: .7rem;
font-size: 1.3rem;
}
&--price {
margin-bottom: 2.5rem;
font-size: 1.2rem;
}
&--colors {
margin-bottom: 1rem;
font-size: 1.1rem;
font-weight: 300;
color: $collection-name-font;
}
}
}
}
}
.shop-list:hover {
border: .1rem solid $font-color;
}
}
}
Also a quick side note, I've not set anything on this page to position:fixed.
Any help or feedback would be greatly appreciated.