Div with nested divs sized really flexibly

Question

I'm looking for an easy and elegant solution to do the following:

I've seen a bunch of Q&A here on StackOverflow, however the majority describes some fixed (known) sizes in pixels. What I would like to achieve is really flexible layout where:

1) Position the div at certain vertical position and have it a certain height -> solved with setting position: fixed; top: 30%; height: 40%;

2) Position the div at the center horizontally -< tried width: auto; margin: 0 auto; but this didn't work

3) Size the nested divs (I'm using the spans right now, but probably that doesn't matter in this context) with their height equal to their width and height of 1 line to be equal to 1/3 (roughly) of the parent div. Also I would like those nested divs to be content agnostic, i.e. set the font size based on the size of the div rather than pushing the divs by increasing the text size. Also, so far the whole thing will break if I exclude couple of captions from the nested divs

So far it looks like this:

I'm pretty sure this is achievable without any js and I'd be happy to get any advice on this.

Thanks

Update 1: I'm updating the post with the link to fiddle, thanks to Sari for the advice.

Answer 1

You may want to consider using a flexbox for this layout. By its nature a flexbox is a flexible box.

Try this:

HTML (no changes to your fiddle demo)

<div id="flexdiv">
    <div id="li1" class="li">
        <span id="l1" class="l">1</span>
        <span id="l2" class="l">2</span>
        <span id="l3" class="l">3</span>
        <span id="l4" class="l">4</span>
    </div>
    <div id="li2" class="li">
        <span id="l5" class="l">5</span>
        <span id="l6" class="l">6</span>
        <span id="l7" class="l">7</span>
        <span id="l8" class="l">8</span>
    </div>
    <div id="li3" class="li">
        <span id="l9" class="l">9</span>
        <span id="l10" class="l">A</span>
        <span id="l11" class="l">B</span>
        <span id="l12" class="l">C</span>
    </div>
</div>

CSS

html, body { height: 100%; } 

body {
    display: flex; /* establish flex container */
    justify-content: center; /* center #flexdiv horizontally */
    align-items: center; /* center #flexdiv vertically */
}

#flexdiv {
    display: flex; /* establish (nested) flex container */
    flex-direction: column; /* align li boxes vertically */
    height: 48vmin; /* height relative to viewport size */
}

.li {
    display: flex;
    text-align: center;
    height: 16vmin; /* height relative to viewport size */
}

.l {
    width: 16vmin; /* boxes maintain aspect ratio */
    line-height: 16vmin; /* vertically center text */
    font-size: 7vmin; /* font size scales */
}

DEMO: http://jsfiddle.net/6bsoze4z/4/