как сделать рост родителей релевантным для детей, но также не увеличивать рост родителей, когда рост детей увеличивается

Question

Как следует из названия, у меня есть родительский div, который содержит дочерние элементы.

Я не могу знать, сколько будет детей, поэтому я не могу дать фиксированный рост родителю.

Высота div для детей увеличивается при наведении.

Как я могу сделать так, чтобы рост родителей соответствовал его детям, но также не увеличивался при увеличении их роста?

Как выможно видеть в коде «parent2» имеет желаемую функциональность, но его высота является фиксированной, которую я не могу использовать.

PS без использования javascript

HTML

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="parent2">
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

.parent,
.parent2{
  display: inline-block;
  width: 200px;
  overflow: hidden;
}

.parent {
  height: auto;
  background-color: green;
  vertical-align: top;
}

.parent2 {
  height: 300px;
  background-color: steelblue;
  margin-left: 50px;
}

.child {
  height: 100px;
  width: 100px;
  background-color: orange;
  margin: 10px auto 10px auto;
  transition: height 0.5s ease;
}

.child:hover {
  height: 150px;
}

Моя скрипка: https://jsfiddle.net/zuswrt23/

Answer 1

Фиксированная высота родительского элемента?Вы можете добавить максимальную высоту для родительского или дочернего элемента div?Я сделал нечто подобное в рамках конкурса CSS 100 дней. Вот ссылка на мой codepen

Каждый дочерний элемент div имеет высоту ширины.

  &:hover {
  font-size: 25px; 
  padding: 70px;
  transition: 0.8s;
    text-transform: uppercase;
}

В Hover я существенно увеличиваю ширину (или в вашем случае это будет высота), добавляя отступ, а не увеличивая высоту.

Родительский контейнер имеет ширину 400 пикселей иустановлен для отображения flex (для размещения переменных дочерних элементов)

display: flex;
flex-direction: row;
width: 400px;