Исправить положение ребенка, когда переход

Question

Моя настройка следующая

<div class=wrapper>
  <div class=element />
</div>

Разметка

.wrapper {
    height: 40px;
    width: 80px;
    border-style: solid;
    border-width: 2px;
    border-radius: 40px;
    border-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
    width: 800px;
    -webkit-transition: width 0.4s ease-in-out;
}

https://codepen.io/anon/pen/eLzGXY

Прямо сейчас, когда я нажимаю Icon, Icon перемещается в середину wrapper по мере его перехода. Я хочу, чтобы он остался слева, на своей первоначальной позиции. Как бы я это сделал?

Answer 1

Чтобы оставить квадратный элемент класса слева, удалите:

    .wrapper {
       justify-content:center;
    }

и затем выделите элемент следующим образом:

    .element {
        margin-left:35px;
    }

https://codepen.io/FEARtheMoose/pen/mGEqVL

Answer 2

Вы можете использовать свойство set css при наведении курсора мыши.

См. Пример ниже.

.wrapper {
    height: 40px;
    width: 80px;
    border-style: solid;
    border-width: 2px;
    border-radius: 40px;
    border-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.element {
  background-color: hotpink;
  width: 10px;
  height: 10px;
}

.wrapper:hover {
    width: 800px;
    -webkit-transition: width 0.4s ease-in-out;
    justify-content: left;
    padding-left:35px;
}

<div class=wrapper>
  <div class=element>
  </div>
</div>

Answer 3

ИМХО, есть несколько способов сделать это - Если вы не склонны использовать позиционирование - вы можете установить абсолютную позицию element, а с помощью некоторого хакера left вы сможете добиться того, чего хотите.

.element {
  background-color: hotpink;
  width: 10px;
  position:absolute;
  left:37px;
  height: 10px;
}

https://codepen.io/anon/pen/OoXOPo#anon-login

Или мы можем использовать relative с некоторым значением justify-items:start в родительском контейнере, чтобы поставить element на его место всегда

https://codepen.io/anon/pen/eLzeZp