fluid-height

CSS can't smoothly transition height when content changes. This library solves that. Simply wrap the content with FluidHeight and you can have a smooth height transitions.

Its a super lightweight library (just 20 lines of code) and has no dependencies

import { FluidHeight } from 'fluid-height';

function Example() {
 return (
  <div className="your-container">
    <FluidHeight
     transitionDurationMs={300}
     transitionTimingFunction="cubic-bezier(0.23, 1, 0.32, 1)"
    >
      <YourContentThatChangesSize />
    </FluidHeight>
  </div>
);

Demo

Click the Randomize button to see how the card's height smoothly transitions