Solution 1 :

  1. Change dispaly: none to transform: scale(0)
  2. In addition to display: flex add transform: scale(1)
    Let us know if that worked!

Problem :

I want to create a transition for an auto height in a flex-box container.
I have a user bar with name, points, status and alert.

The alert message sometimes is rendered sometimes is not. It uses a display: none
What I’m trying to achieve is to resize smoothly the height of the flex-box container with a transition when I click on the alert message.

Here is a basic example (not working)

const $user_alert = document.querySelector('user-alert')

$user_alert.onclick = () => {
  setTimeout(() => $user_alert.classList.remove('hide'), 1e3)
body {
  display: flex;
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: aliceblue;

user-bar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 2s ease-in-out;

user-alert {
  cursor: pointer;
  color: red;

.hide {
  display: none;
  <user-name>Albert Einstein</user-name>
  <user-alert>Time to Party Hard</user-alert>

I cannot figure out how to create a simple transition without defining heights for each element inside the user bar… maybe it’s not possible using display: none.

Any help or idea will be really appreciate!


Comment posted by CSS Opacity transition with display: none

Does this answer your question?

Comment posted by

There will be no need for animation, just replace

Comment posted by Johnny Johnny

Manas, that’s an alternative, thanks. I would like to avoid keeping the space of the user alert message.

Comment posted by Johnny Johnny

disinfor, that answer is focus on the element that has

Comment posted by Johnny Johnny

Thank you so much, great answer but I’m not allow to change

Comment posted by YTG

Vote up for a grate answer:)

Comment posted by Johnny Johnny

no problem with that but could you help me? keeping the

Comment posted by…

You cannot have transition on a boolean property. See here