当box改变高度时，我试图进行平滑的转换，但当我使用对我来说非常重要的最小高度时，转换不起作用，下面是我制作的示例代码，以确保这个问题不会只出现在我的页面上，而是出现在任何地方。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.main {
width: 100%;
height: 100vh;
background-color: #F4EEA9;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50%;
min-height: 10vh;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
padding: 20px;
transition: 0.5s;
}
.box:hover {
height: 50vh;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>TEST</title>
</head>
<body>
<div class="main">
<div class="box">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate mollitia numquam est voluptas rem, voluptates dolore a rerum amet eos quae eum laudantium exercitationem quas quasi vel quia perferendis consectetur sit omnis. Placeat, nisi deleniti.
Facere architecto, possimus veritatis quo molestiae temporibus vero vel recusandae, iusto ullam nostrum quia voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt nesciunt ratione consectetur corrupti laboriosam aliquid,
beatae atque laborum deleniti adipisci esse blanditiis cum facere sequi voluptatibus, molestias eos sint tempore quia, quo cumque quasi. Repellat quas quaerat soluta officia voluptatum dolorum nobis a iure voluptatem id, cumque corporis voluptas
nesciunt.</p>
</div>
</div>
</body>
</html>您必须首先添加init height值才能使其工作。
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.main {
width: 100%;
height: 100vh;
background-color: #F4EEA9;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 50%;
min-height: 12vh;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
padding: 20px;
transition: 0.5s;
/* adjust this value */
height: 0;
overflow: auto;
}
.box:hover {
height: 50vh;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>TEST</title>
</head>
<body>
<div class="main">
<div class="box">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate mollitia numquam est voluptas rem, voluptates dolore a rerum amet eos quae eum laudantium exercitationem quas quasi vel quia perferendis consectetur sit omnis. Placeat, nisi deleniti.
Facere architecto, possimus veritatis quo molestiae temporibus vero vel recusandae, iusto ullam nostrum quia voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt nesciunt ratione consectetur corrupti laboriosam aliquid,
beatae atque laborum deleniti adipisci esse blanditiis cum facere sequi voluptatibus, molestias eos sint tempore quia, quo cumque quasi. Repellat quas quaerat soluta officia voluptatum dolorum nobis a iure voluptatem id, cumque corporis voluptas
nesciunt.</p>
</div>
</div>
</body>
</html>这是有效的：-
.box{
width: 50vw;
max-height: 10vh;
box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
padding: 20px;
transition: all .2s ease-in-out;
overflow:hidden;
}
.box:hover{
height: 50vh;
max-height: 50vh;
}
你必须设置最小高度和最大高度，这样它就知道去往和去往，我也隐藏了溢出。希望这能起作用