Set parent's height depending on the amount of children?

Question

Is it possible to set a parents height in CSS, depending on the amount of children the element has?

Like:

.parent:has-1-children {
    height: 60px;
}
.parent:has-2-children {
    height: 110px;
}
.parent:has-3-children {
    height: 160px;
}

Or simply:

.parent {
    height: calc(this.children() * 50px + 10px);
}

?

Can you show us the HTML? There is a very simple answer to that without much CSS I think. But I need your Elements-HTML-Code — CoderPi, Jan 12 '16 at 17:30
If the parent have the `height: auto` or nothing declared as `height`, the heigth automatically fits with your requirements, you don't need to make nothing more. However, the only answer to your literal question is **javascript** — Marcos Pérez Gude, Jan 12 '16 at 17:31
@MarcosPérezGude Yes, well, I am simply trying to make an animated dropdown with: http://stackoverflow.com/a/8331169/2378102 where max-height depends and must be calculated, or otherwise the animation-duration will be either to short or to long for different drop-downs, depending on their amount of children inside. — , Jan 12 '16 at 17:33
If you run with `max-height` as in the example, you can put anything in max-height (for example `max-height: 1000px`) and the browser don't go more of the real height of the element. If the element have 100px of height, it never reach the 1000px of max — Marcos Pérez Gude, Jan 12 '16 at 17:36
@MarcosPérezGude Yes, but then the animation will take as much time as needed for 1000px, which means it will be 10 times slower. — , Jan 12 '16 at 17:38
@Murplyx I had a look at it, you can't do it without JavaScript. Would you want a JavaScript solution? — CoderPi, Jan 12 '16 at 17:41
With jquery, the simple following line: `$('.selector').slideDown(200);` executes what you need with all calculations in javascript. With CSS you can't make calcs. — Marcos Pérez Gude, Jan 12 '16 at 17:42
@CodeiSir Yes, thing is, I tried inline javascript using style="" inside different dropdowns, but then you can't have a :hover selector — , Jan 12 '16 at 17:42
@Murplyx did you try putting JavaScript into `style=""` ??? That wont work! ^^ — CoderPi, Jan 12 '16 at 17:51
@CodeiSir No, obviously not, but I wish you could do style="hover: blabla" — , Jan 12 '16 at 18:02
@Murplyx well just add a script, that does it. Do you like my answer? — CoderPi, Jan 12 '16 at 18:03

score 0 · Answer 1 · answered Jan 12 '16 at 17:49

JavaScript solution (with CSS transition)

http://jsfiddle.net/urq1j3aj/

var menu = document.getElementById("menu")
var menuUl = document.getElementById("list")

menu.onmouseover = function() {
  menuUl.style.height = menuUl.scrollHeight + "px"
  menu.classList.add("hover")
}
menu.onmouseout = function() {
  menuUl.style.height = "0"
  menu.classList.remove("hover")
}

#menu #list {
  height: 0;
  transition: height 0.15s ease-out;
  overflow: hidden;
  background: #d5d5d5;
}
#menu.hover #list {
  transition: height 0.25s ease-in;
}

<div id="menu">
  <a>hover me</a>
  <ul id="list">
    <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

Simplyfied inline JavaScript Version:

#menu #list {
  height: 0;
  transition: height 0.15s ease-out;
  overflow: hidden;
  background: #d5d5d5;
}

<div onmouseover="this.querySelector('ul').style.height = this.querySelector('ul').scrollHeight + 'px'" 
     onmouseout="this.querySelector('ul').style.height='0'">
  <a>hover me</a>
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

Set parent's height depending on the amount of children?

1 Answers1

JavaScript solution (with CSS transition)

Simplyfied inline JavaScript Version: