Question

I have a problem trying to make a flexible absolutely positioned element inside relative positioned element. Here is the code:

http://jsfiddle.net/cxHNN/

The above code works fine when the .content div inside the .active div has the largest height value. (inner-3 in this case)

But if the .active class is set on any other inner element (with less text), the content from largest element (inner-3) overflows (see example here).

I can work this out using JavaScript, but I would like a pure css solution to this problem, such that all the inner elements are of equal heights without giving a fixed-height so that their height dynamically changes as the container-width changes (in a responsive layout).

Note:
Nevermind the pixel-based margins/widths. I had to tweak the css a little to make it work jsFiddle. They’re all in % or ems in my original stylesheet.

Answer 1

Try hiding all .inner divs, and only show the active div?

.inner .content {
    background: none repeat scroll 0 0 #CCCCCC;
    margin-top: -4em;
    padding: 0.5em;
    display: none;}
.inner.active .content{
    display: block;
    }

UPDATE: If you need the inner divs to be the same size, you can’t position them absolutely, or float them, or display them hidden or inline. So, I’ve done thie following:

• The flex container is positioned relative, and given enough padding that the elements inside it can be positioned top left, and position correctly. I have also set the font size 0 and prevented wrapping.
• The inner div is displayed inline-block, with a width of 0
• The active inner block is given a 100% width, so that it is the only one shown
• The H1s are positioned absolutely, and placed where you want them

http://jsfiddle.net/cxHNN/4/

You will need to play with the padding and spacing and stuff. Oh, and I only tested this on FireFox – there may be issues with other browsers.