Make container of inline blocks (that is inline-block on its own) to wrap its contents into 2 lines while resizing

Question

I have quite an interesting problem in front of me. I think it would be better to illustrate it in codepen:

https://codepen.io/BooleT/pen/bWdPWe/

In the class names ib means "inline-block" and iib means "inner inline block".

I have created figures to illustrate what I am trying to achieve. In the next 3 paragraphs I will reference the images in this album:

https://imgur.com/a/9CFAm

So there are three inline blocks, one of which is actually a container of three other inline-blocks:

The effect I want to achieve is to make the contents of the container to wrap into 2 lines when I resize the window:

But instead I only manage to wrap the whole container itself to the second line:

Is there actually the way to achieve what I want? I've tried to add nbsp between outer inline-blocks and to add white-space: nowrap to the body element (and overwrite it to white-space: normal for the container), but none of it worked. I know that I can work around it by adding media-queries or js that simply reduces the width (or max-width) of the container when I reduce the screen width, but it doesn't seem like the solution. I don't even know the width of every block in my real layout.

I will try to keep an open mind, since the solution to this problem might require to change the entire layout of the page, but I do think there is one.

Answer 1

Being not a fan of flexboxes – the burden of old-browser compatibility still standing strong where I come from – here's what we do to make a container on the right occupy all the remaining horizontal space: Codepen

The fixed-size divs on the left are told to be float: left . The spanning div on the right is given display: block . The smallest inner divs are display: inline-block .

Answer 2

If you can use flexbox then this pen: http://codepen.io/anon/pen/RVWwEP seems like it does what you want. Be aware of the compatibility caveats that go along with flexbox, though.

For convenience I've put display: flex; on the body to create top level row, although @10nikov's answer is definitely a better way to do that.