CSS Calc-size Function Basic

<!DOCTYPE html>
<title>My Example</title>

.accordion-header {
    background-color: #007bff;
    color: white;
    padding: 15px;
    margin: 0;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
  }

.accordion-content {
    background-color: #f8f9fa;
    /* Start with a height of 0 */
    height: 0;
    overflow: hidden;
    /* Smoothly transition the height */
    transition: height 0.4s ease-out;
  }
  
  .accordion-inner {
    padding: 20px;
    color: #333;
    line-height: 1.5;
  }

/* When hovering the container, animate to the natural auto height */
  .accordion-container:hover .accordion-content {
    height: calc-size(auto, size);
  }
  
  .warning-msg {
    font-family: sans-serif;
    font-size: 0.85em;
    color: #d9534f;
    margin-top: 15px;
    text-align: center;
  }
  
  /* Show a warning if the browser doesn't support calc-size() */
  @supports not (height: calc-size(auto, size)) {
    .accordion-container:hover .accordion-content {
      /* Fallback for older browsers so the content is at least visible */
      height: auto; 
    }
    .warning-msg {
      display: block;
    }
  }
  @supports (height: calc-size(auto, size)) {
    .warning-msg {
      display: none;
    }
  }
</style>

<div class="accordion-container">
  <div class="accordion-header">Hover to Expand</div>
  <div class="accordion-content">
    <div class="accordion-inner">
      This content is animating smoothly to its intrinsic <code>auto</code> height! Before <code>calc-size()</code>, this smooth transition was impossible without JavaScript or hard-coded pixel values.
    </div>
  </div>
</div>

<div class="warning-msg">
  <em>Note: Your browser doesn't support calc-size() yet, so the box will snap open instantly instead of animating smoothly.</em>
</div>