How to animate scaling of div with gridlayout smoothly - css

Question

I have a which contains a gridlayout with some cells. When the div is shown or hidden it should scale gradually over time. Currently when showing, the div is initially sized to fit the contents and then scales. When hidden it is immediately hidden unless padding is set. Then it is immediately resized to the size of the padding.
Example is shown below. How to adapt the styling in such that the div resizes smoothly and text stays in place (clips and does not wrap)
function toggle() {
if (document.getElementsByClassName("ovdInfobox")[0].classList.contains("ovdInfobox--visible")) {
document.getElementsByClassName("ovdInfobox")[0].classList.remove("ovdInfobox--visible")
console.log('remove');
} else {
document.getElementsByClassName("ovdInfobox")[0].classList.add("ovdInfobox--visible")
console.log('add');
}
}
.ovdInfobox {
display: grid;
grid: 40px auto / auto auto;
z-index: 1;
position: absolute;
top: 50px;
width: 0;
height: 0;
min-width: 0;
min-height: 0;
overflow: hidden;
padding: 0;
border: 0;
background: rgba(255, 255, 255, 0.98);
border-radius: 4px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
transition: all 4.2s ease-in-out;
background: green;
}
.ovdInfobox--visible {
width: unset;
height: unset;
min-width: 300px;
border: 1px solid #d1d1d1;
/* padding: 15px 15px 15px 15px;*/
}
.ovdInfobox__header {
grid-column-start: span 2;
color: #c20063;
font-size: 18px;
font-weight: normal;
}
.ovdInfobox__label {
font-weight: bold;
}
.ovdInfobox__data {}
<div>
<button onclick="toggle()">
Click Me!
</button>
<div class="ovdInfobox ovdInfobox--visible" onCLick="toggle()">
<div class="ovdInfobox__header">Details</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
</div>
</div>

Answer 1

New day, fresh start, fresh mind.
Changed class .ovdInfobox and .ovdInfobox--visible by replacing width, height, min-width and min-height by max-width and max-height. Resizing now works as expected.
function toggle() {
if (document.getElementsByClassName("ovdInfobox")[0].classList.contains("ovdInfobox--visible")) {
document.getElementsByClassName("ovdInfobox")[0].classList.remove("ovdInfobox--visible")
console.log('remove');
} else {
document.getElementsByClassName("ovdInfobox")[0].classList.add("ovdInfobox--visible")
console.log('add');
}
}
.ovdInfobox {
display: grid;
grid: 40px auto / auto auto;
column-gap:10px ;
row-gap: 5px;
z-index: 1;
position: absolute;
top: 50px;
max-width: 0;
max-height: 0;
overflow: hidden;
padding: 0;
border: 0;
background: rgba(255, 255, 255, 0.98);
border-radius: 4px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
transition: all 4.2s ease-in-out;
background: green;
}
.ovdInfobox--visible {
max-width: 300px;
max-height: 200px;
border: 1px solid #d1d1d1;
padding: 15px 15px 15px 15px;
}
.ovdInfobox__header {
grid-column-start: span 2;
color: #c20063;
font-size: 18px;
font-weight: normal;
}
.ovdInfobox__label {
font-weight: bold;
}
.ovdInfobox__data {}
<div>
<button onclick="toggle()">
Click Me!
</button>
<div class="ovdInfobox ovdInfobox--visible" onCLick="toggle()">
<div class="ovdInfobox__header">Details</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
<div class="ovdInfobox__label">
label
</div>
<div class="ovdInfobox__data">
data
</div>
</div>
</div>