div从隐藏到显示且高度自适应，在线预览HTML/Vue

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

<div class="hover-dom">Hover Me</div>
<div class="grid-container">
  <div>
    <p>这里是自适应的一段文字，用来测试hover的时候展示并使显示的div高度自适应。。。从现在开始就是随便加的文字了，没有必要细看、、、、</p>
  </div>
</div>

</body>

CSS

格式化

.hover-dom {
  background: blueviolet;
  width: 100px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  margin-top: 30px;
  margin-left: 30px;
}
.grid-container {
  display: grid;
  margin-left: 30px;
  grid-template-rows: 0fr;
  transition: .5s ease-in-out;
}
.grid-container > div {
  overflow: hidden;
  text-align: justify;
  padding-inline: 20px;
  width: 200px;
  background: #ffeecc;
}
.hover-dom:hover + .grid-container {
  grid-template-rows: 1fr;
}

格式化

预览

控制台