39 replies

How to transition height?

Hi guys, I have a simple layout with an outer box and an inner box. Is it possible to animate the height of the inner box while ensuring it does not extend beyond the outer box? The height of the outer box may vary depending on its content. Thanks.

<style>
  .outer{
    height: 300px;
    width: 300px;
    background-color: green;
    position: relative;
  }
  .inner {
    position: absolute;
    top: 10px; 
    height: 0; 
    inset-inline:0;
    background-color:red;
    overflow-y: auto;
  }
</style>
<div class="outer">
  <div class="inner"></div>
</div>

<style>
  .outer{
    height: 300px;
    width: 300px;
    background-color: green;
    position: relative;
  }
  .inner {
    position: absolute;
    top: 10px; 
    height: 0; 
    inset-inline:0;
    background-color:red;
    overflow-y: auto;
  }
</style>
<div class="outer">
  <div class="inner"></div>
</div>

<style>
  .outer{
    height: 300px;
    width: 300px;
    background-color: green;
    position: relative;
  }
  .inner {
    position: absolute;
    top: 10px; 
    height: 0; 
    inset-inline:0;
    background-color:red;
    overflow-y: auto;
  }
</style>
<div class="outer">
  <div class="inner"></div>
</div>

<style>
  .outer{
    height: 300px;
    width: 300px;
    background-color: green;
    position: relative;
  }
  .inner {
    position: absolute;
    top: 10px; 
    height: 0; 
    inset-inline:0;
    background-color:red;
    overflow-y: auto;
  }
</style>
<div class="outer">
  <div class="inner"></div>
</div>

How to transition height?

Similar Threads

Similar Threads

Similar Threads