Kevin Powell - Community•2w ago

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>

26 Replies

ἔρως•2w ago

have you tried transition-behaviour: allow-discrete? https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior and then change the height to auto?

ἔρως•2w ago

nevermind, you can try this: https://stackoverflow.com/a/8331169

Stack Overflow

How can I transition height: 0; to height: auto; using CSS?

I am trying to make a <ul> slide down using CSS transitions. The <ul> starts off at height: 0;. On hover, the height is set to height:auto;. However, this is causing it to simply appea...

emptyOP•2w ago

It seems to work, but I don’t want the inner box to extend beyond the outer box. In this case, I suppose I need to use JavaScript to get the height of the outer box, right?

ἔρως•2w ago

set a max height on the outer box

emptyOP•2w ago

I want the outer box to expand according to its content, so I cannot set a max height on it

ἔρως•2w ago

then don't do anything if you do nothing, the height of the outer box is always higher than the inner box because it's height is based on the height of it's children + margins (depends) + borders + padding (depends)

emptyOP•2w ago

Sorry, I did not mentioned that the position of the inner is absolute and the outer is relative so it can be higher than the outer box

ἔρως•2w ago

but if you give it a max-height of 100%, it will be as big as the parent, at most

emptyOP•2w ago

I found this blog https://dev.to/francescovetere/css-trick-transition-from-height-0-to-auto-21de. But I dont know how to make it not higher than the outer box I'll try it

ἔρως•2w ago

if that doesn't work, well, there is probably another solution with css variables

Darryll•2w ago

You can't transition between heights but you can transition between fixed max-height values You can let it be a bit inconsistent by just setting the max height higher than you need but you'll prob want a js solution Max height:.100% doesnt work with transition iirc but max-height: 500px would

ἔρως•2w ago

in that case, the css variable solution should do it

Darryll•2w ago

Not sure about any variable solution but I'd love to know if you have one

ἔρως•2w ago

it's the same, but with variables basically, you save the max-height on a variable and use it then do math to it

Tok124 (CSS Nerd)•2w ago

There are no problem to transition height. You can transition from height:100px; to height:200px; without any issues. If you wanna transition from height:0; to height:auto; you need interpolate-size:allow-keywords;. So transitioning height works just fine, even with intrinsic sizing.

ἔρως•2w ago

THAT'S IT i said the wrong property sorry

Darryll•2w ago

Didn't know that's a thing but that's amazing to know, I'll play with that at some point And yes specifically i should have said you can't transition to height auto normally, that's what i meant

vince•2w ago

Sorry if this is already answered but you can transition height with grid iirc Something like grid-template-row: 0 to grid-template-row: auto I believe Kevin has a video on it

ἔρως•2w ago

he has position absolute

vince•2w ago

Ah I see. Probably need JS to find the height of the outer box if they don't want to hardcode the height, then set the grid row height to that Have a css variable you can save the height to via JS. At least that's how I'd do it

ἔρως•2w ago

i would just set a static height and make it scrollable

emptyOP•2w ago

The solution of using grid-template-rows: 0 to grid-template-rows: 1fr with a max height seems to work fine for me. However, when I use this solution with state in React, it does not work as it did when I tested it on CodePen. The transition no longer occurs. Here is how I toggle the grid-template-rows.

<div
   className={cn(
                "transition-grid absolute inset-x-0 top-[55px] z-20 grid max-h-[calc(100%-55px)] grid-rows-[0fr] bg-[#1f2937]",
                 showYears && "grid-rows-[1fr]",
               )}>
// content 
</div>

<div
   className={cn(
                "transition-grid absolute inset-x-0 top-[55px] z-20 grid max-h-[calc(100%-55px)] grid-rows-[0fr] bg-[#1f2937]",
                 showYears && "grid-rows-[1fr]",
               )}>
// content 
</div>

vince•2w ago

I'm not familiar with that syntax. What is cn()? Dev tools is your friend here

emptyOP•2w ago

I checked the dev tools and saw that the grid-rows-[1fr] is added. cn is a utility function (commonly used with tailwind css), it's usually used to conditionally add/remove classes

Chris Bolson•2w ago

Are you sure that transition-grid exists?

emptyOP•2w ago

It's my custom class 😅 not from tailwind css

Gaming

Programming

How to transition height?

Did you find this page helpful?