Transition for height is not working in react poject-CodePudding

I displaying cards, If I hover the card, the height will increase, and displaying the description, my CSS and code are given below and I need to implement transmission for this card while increasing and decreasing the height.

<div className="icon-box">
                    <div className="icon">
                      <img
                        src={item.compliance_logo}
                        style={{ height: "100%", width: "110%" }}
                        alt="logo"
                      />
                    </div>
                    <h3>
                      <a style={{ color: "#000080" }}>{item.compliance_name}</a>
                    </h3>
                    <p style={{ fontSize: "12px" }}>
                      {item.compliance_description}
                    </p>
                  </div>

and the css is

.icon-box {
  padding: 30px;
  background: #fff;
  box-shadow: 0px 5px 90px 0px #f0f0ff;
  border-radius: 18px;
  border-bottom: 5px solid #fff;
  height: 150px;
  font-size: small;
  overflow-y: hidden;
  cursor: pointer;

}
.icon-box:hover {    
  transform: translateY(-10px);
  transition:height 4s;
  border-color: #000080;
  height: max-content;
}

CodePudding user response：

The transition declaration should be in .icon-box to make it smoothly change its height, not in .icon-box:hover

EDIT 1

Set the height to 100% and use max-height to change it:

.icon-box {
  padding: 30px;
  background: #fff;
  box-shadow: 0px 5px 90px 0px #f0f0ff;
  border-radius: 18px;
  border-bottom: 5px solid #fff;
  height: 100%; /* added this */
  max-height: 150px; /* edited here */
  font-size: small;
  overflow-y: hidden;
  cursor: pointer;
  transition: max-height 4s; /* added this */
}

.icon-box:hover {    
  transform: translateY(-10px);
  border-color: #000080;
  max-height: max-content; /* edited and removed transition declaration */
}

EDIT 2

It doesn't work for things like max-content. You can consider using units (for example: max-height: 100%;).