Преобразование высоты дочернего элемента div при наведении на родительский элемент div

Question

Я бы хотел transform height из моего .bar в 3px при зависании .wrapper, Я знаю, что должен использовать transition а также transform, но я понятия не имею, как transform мое дитя div наведите его родителя. На данный момент я transform только мой родитель div (понятно почему). Как transformheight моего ребенка, зависания моего родителя div (должен быть бар, идущий вверх / вниз на дне .wrapper)? Обратите внимание, что родительский элемент div не должен преобразовывать его размеры, просто дочерний элемент!

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  transition: all 1s ease-in-out;
}

.wrapper:hover {
  /*ON HOVER WRAPPER TRANSFORM HEIGHT OF BAR TO 3px*/
  transform: scale(2);
  cursor: pointer;
}

.bar {
  width: 100%;
  height: 0px;
  background-color: blue;
}

.bar:hover {}

<div class="wrapper">
  <div class="bar"></div>
</div>

Answer 1

Используйте дочерний селектор .wrapper:hover>.bar:

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  transition: all 1s ease-in-out;
}

.wrapper:hover {
  cursor: pointer;
}

.bar {
  width: 100%;
  height: 0px;
  background-color: blue;
  transition: height 200ms ease-in-out;
}

.wrapper:hover>.bar {
  height: 3px;
}

<div class="wrapper">
  <div class="bar"></div>
</div>

Answer 2

Используйте этот селектор CSS > чтобы сделать это,

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  transition: all 1s ease-in-out;
}


/*.wrapper:hover {
  transform: scale(2);
  cursor: pointer;
}*/

.bar {
  width: 100%;
  height: 0px;
  background-color: blue;
  transition: 0.6s ease;
}

.wrapper:hover > .bar {
  height: 10px;
}

<div class="wrapper">
  <div class="bar"></div>
</div>