Transition don't work with min-height property-CodePudding

I tried to make smooth transition while box is changing height, but when i use min-height, which is very important to me, transition dont work, here is example code that i make to make sure that this problem dont show only on my page but everywhere.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>TEST</title>
</head>
<body>
    <div >
        <div >
            <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>

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

CodePudding user response：

You have to add init height value first to make it work.

* {
  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 >
    <div >
      <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>

CodePudding user response：

This works :-

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

You have to set the min height and the max height so it know that to go to and from, also I have hidden the overflow. Hope this works