CSS change height of children based on container element count

Question

I've got a container which sometimes has three elements, sometimes four. The height of the container is constant.

Are there any bright ideas out there for a CSS-based method for a vertical liquid layout like this?

That is, so the children are either 25% or 33% height, but they figure that out by themselves? (smart kids.) EDIT of course it doesn't necessarily have to be percentage based...

I can do something PHP-based pretty easily, but a more elegant solution would be nice.

Answer 1

Well, I've just ended up using a table as the outer container. Table rows added dynamically vertically scale the layout automatically.

Elegant enough, and prevents any PHP processing. Any other solutions welcome, of course (and maybe accepted).

Answer 2

Here is a little Sass to make your life easier:

$height: 200px

ul
  height: $height

@for $i from 1 through 6
  .list-#{$i} li
    height: $height/$i

You can also do it with straight CSS:

.list-1 li {
  height: 200px;
}

.list-2 li {
  height: 100px;
}
...

With PHP, add the .list-# class to the parent element based on how many children there are.

You could also accomplish this in pure CSS with flexbox, but it will not work in the browsers you require.