html - 如何使 parent 高度与 child 相关，但当 child 高度增加时也不增加 parent 高度

Question

如标题所述，我有一个包含子 div 的父 div。

我不知道会有多少个 child ，所以我不能给 parent 一个固定的高度。

悬停时子 div 的高度会增加。

我怎样才能让 parent 的高度与其 child 相关，同时又不随着他们的高度增加而增加？

正如您在代码中看到的那样，“parent2”具有所需的功能，但它的高度是固定的，我无法使用。

不使用javascript的PS

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

我的 fiddle :https://jsfiddle.net/zuswrt23/

Answer 1

parent的高度是固定的吗？你能给父级或子级 div 添加最大高度吗？ 作为 100 days CSS challenge. 的一部分，我做了类似的事情这是我的 codepen 的链接

每个子 div 都有一个宽度和高度。

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

在悬停时，我实际上是通过添加填充而不是增加高度来增加宽度(或者在您的情况下，它是高度)。

父容器的宽度为 400px 并设置为显示 flex(以适应可变的子 div)

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