Элемент действует так, как будто он имеет фиксированное положение

Question

, поэтому я искал решение этой проблемы и не смог найти четких или действительно каких-либо ответов (может быть, я просто не знаю, как сформулировать вопрос?). Итак, я действительно буду полагаться на изображения для этого вопроса, а затем объясню, что происходит.

Начальная позиция chrome инструментов разработчика

Выше начальная позиция элемента (содержимое чуть выше инструментов разработчика). В этой позиции элементы функционируют должным образом, однако при изменении размера инструментов разработки элементы перемещаются вверх или вниз. На следующем рисунке я увеличил размер инструментов разработчика, и элементы, о которых идет речь, перемещаются с помощью инструментов.

Увеличенный размер chrome инструментов разработчика

Как Вы можете видеть на картинке выше, когда я изменяю размер инструментов разработчика, элементы страницы и следующая кнопка перемещаются почти так, как будто они прикреплены к инструментам разработчика.

Что меня действительно смущает, так это то, что я не использовал css на любой части рассматриваемых элементов. И что меня еще больше смущает, так это то, что ни один другой элемент на странице не реагирует так же, как рассматриваемый элемент (который снова является самым последним элементом на странице).

Ниже мой html и S CSS код:

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">
              &#36;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">
              &#36;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">
              &#36;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">
              &#36;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>&#8964;</span></p>
                        <p class="page--length">of 9</p>
                    </div>
                </div>
            </div>
            <div class="page--next">
                <button class="next">next</button>
            </div>
        </div>
    </section>

S CSS

// 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;
        }
    }
}

Также небольшое примечание, я не устанавливал все на этой странице на position:fixed.

Мы будем благодарны за любую помощь или отзывы.