There is an element such as a .login__window popup window. It is necessary to make it so that it was not visible, but it appeared when you hover over the button. I don’t want to do through display: none/ visibility: hidden , because transition does not work with it. I do through max-height .

  * { box-sizing: border-box; margin: 0; padding: 0; } .login__open { position: absolute; right: 1em; top: 1em; height: 2em; width: 5em; } .login__open:hover ~ .login__window { max-height: 10em; } .login__window { display: table; box-sizing: border-box; background-color: #ebf1ff; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 1vh 0 1vh 0; margin: 0; position: absolute; display: table; z-index: 100; min-width: 25vw; max-height: 0; //не работает overflow: hidden; padding: 2vh; right: 1em; top: 3em; } .row { display: table-row; margin: 1em; } .row > * { display: table-cell; } 
  <div id="login"> <button class="login__open">Entrer</button> <article class="login__window popup"> <div class="row"> <label for="">Votre login:</label> <input type="text" name="login-login" id="login-login" autocomplete="off" placeholder="Login" /> </div> <div class="row"> <label for="">Votre mot de passe:</label> <input type="password" name="login-password" id="login-password" autocomplete="off" placeholder="password" /> </div> <div class="row"> <button>Entrer</button> </div> </article> </div>

So, the .login__window element .login__window not matter at all whether the width is worth it, whether it is worth height , or whether it is worth max-width/height , it does not react to any of these properties.
PS is written in LESS , in CSS converted correctly, there is a height property: 0, and the developer’s tools in chrome also show it. The properties at the top in the comments are given in other parts of the code, and min-width and min-height commented out to check if it works without them. Does not help.

  • and where is the layout? html what? - user33274

1 answer 1

Not a lot with the emitted height that you did not give

 * { box-sizing: border-box; margin: 0; padding: 0; } .login__open { position: absolute; right: 1em; top: 1em; height: 2em; width: 5em; } .login__open:hover~.login__window { opacity: 1; visibility: visible; transform: rotateX(0deg); } .login__window { display: table; background-color: #ebf1ff; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 1vh 0 1vh 0; margin: 0; position: absolute; display: table; z-index: 100; transition: all .5s linear; min-width: 25vw; opacity: 0; visibility: hidden; transform: rotateX(90deg); overflow: hidden; padding: 2vh; right: 1em; top: 3em; border: 3px solid red; } .row { display: table-row; } .row>* { display: table-cell; } 
 <div id="login"> <button class="login__open">Entrer</button> <article class="login__window popup"> <div class="row"> <label for="">Votre login:</label> <input type="text" name="login-login" id="login-login" autocomplete="off" placeholder="Login" /> </div> <div class="row"> <label for="">Votre mot de passe:</label> <input type="password" name="login-password" id="login-password" autocomplete="off" placeholder="password" /> </div> <div class="row"> <button>Entrer</button> </div> </article> </div>

  • The problem is not in the table. The table is displayed and all its elements are correct, for body, html is the width: 100vw, height: 100vh. The thing is, when I set max-height: 0 for an element, it disappears, and then I can “unwrap” it with max-height more than 0. But it doesn't matter what the element is, max-height / height or not, he still adjusts to the content - Alex Chashin
  • then not max-height can be a visibility or is it max-height necessary? you can add by clicking a certain class that will contain the desired property - user33274
  • The problem is that transitions do not work with visibility and display, and I need the "menu" to appear smoothly. I used to do this with max-height / width before, but this time the element for some reason simply refuses to respond - Alex Chashin
  • you would show all the code and you could think further, but then I’m wondering what to do and not about it, but what you have with css and with the problem description - user33274
  • Added like everything - Alex Chashin