There is a menu button, by clicking on which the menu falls out. The list is dynamic and can be very long. It is necessary to make sure that the height of the list is never greater than the height of the main container and the list items are arranged in several columns (if necessary).

The problem is that the list is a child of the button, the list location must be positioned relative to this button + to fit into the html structure, especially there is no possibility (a third-party library of components Vue is used). Markup "nakidal" schematic. I would understand the principle itself)

.wrap{ display: flex; flex-direction: column; height: 200px; width: 50%; border: 1px solid green; } .header{ height: 30%; border: 1px solid blue; display: flex; justify-content: center; } .btn { width: 30px; height: 40%; border-radius: 50%; border: 1px solid red; position: relative; } .menu { position: absolute; width: 50px; border: 1px solid black; } 
 <body> <div class="wrap"> <header class="header"> <div class="btn"> <ul class="menu"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </header> </div> </body>

  • try flex-flow: column wrap; + max-height: XXXpx; menu wrapper max-height: XXXpx; - HamSter
  • @HamSter, flex-wrap will help if the list has any height. But it, just, set and fails, because The wrapper of the list is a small button with fixed sizes. Of course, I could be wrong and do something wrong, but I tried many different options) - Dmytryk
  • prntscr.com/luczg7 so I mean, perhaps I’m missing - HamSter
  • @HamSter, yes, that's right. But I would like to set the height relative to the main container). Well, I mean, not exact pixels, but relative sizes - Dmytryk
  • The height of the main container .wrap? you have 200px fixed. So you can set it and the list. And if there is no such possibility, then js can be calculated for the main container and set it to the list, a couple of lines of code. - HamSter

0