Почему элемент выглядит как блочный?

Есть flex контейнер, в котором находятся input и кнопка.
Почему-то при заданных flex-shrink и flex-grow контейнер расстягивается на всю ширину окна.

Как исправить данную ситуацию?

HTML

<div class="resizePopUp popUp">
    <input type="range" class="width">

    <div class="openHide">
        <img src="../img/icons/chevron left-right.svg" alt="">
    </div>
</div>

CSS

.resizePopUp {
  background: #2F2F2F;
  display: flex;
  flex-shrink: 1;
  flex-grow: 0;


  .openHide {
    height: 80px;
    width: 80px;

    display: grid;
    justify-items: center;
    align-items: center;
  }
}

введите сюда описание изображения


Ответы (0 шт):