'Transition don't work with min-height property

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.

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


Solution 1:[1]

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

Solution 2:[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions