make div size fit-content without losing transition animation-CodePudding

My goal is that the size of the DIV (height) will adjust itself to the text on the DIV. (while maintaining a minimum height)
but if the user moves his mouse over the DIV the DIV changes its height properly, without losing the beautiful effect of transition

If I change height: fit-content; to fix size, suppose to height: 100px; the transition animation works but the div height don't necessarily match the text on the DIV.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  border-style: solid;
  border-width: 1px;
  width: 200px;
  height: fit-content;
  min-height: 50px;
  background-color: #0000ff;
 transition: 0.5s;
}

div:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 300px;
}
</style>
</head>
<body>

<div>Lorem ipsum dolor sit amet</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue convallis</div>

</body>
</html>

CodePudding user response：

I believe you can handle this situation by using min-height. see the below snippet:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        border-style: solid;
        border-width: 1px;
        width: 200px;
        min-height: 50px;
        background-color: #0000ff;
        transition: 0.5s;
      }

      div:hover {
        background-color: #ffcccc;
        width: 200px;
        min-height: 300px;
      }
    </style>
  </head>
  <body>
    <div>Lorem ipsum dolor sit amet</div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt
      justo rutrum tellus congue convallis Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Integer tincidunt justo rutrum tellus congue
      convallis
    </div>
  </body>
</html>

In cases where the height of the element is not fixed and we want transitions, we should use either min-hegith or max-height.

CodePudding user response：

You can animate the padding instead of height and you can keep the nice animation :)

div:hover {
  background-color: #ffcccc;
  padding-bottom: 100px;
}