I’m hoping this can be done with flexbox and not require (too much) trickery.
What I’m looking for:
1) One large block, and two smaller ones next to it that rowspan, without having to have their own nested wrap. Working Example
2) Percentage width that resizes at a fixed aspect ratio, probably using the padding-top/bottom trick. This can either be defined on just the large block, the smaller ones, or both. I say either/or/and because I don’t really care so much that all the blocks have the same aspect ratio. In fact, preferably the padding would only be set on the large block, and the smaller ones would flex to fill the row. But either way, I only care that they all resize together, relative to the width of the container. Working Example
That last bit is where I’m hitting the major road block. The first example with a rowspan looks great, but seems to rely on a defined height on the wrap, which breaks the responsiveness. When I try controlling the height of the blocks rather than the wrapper, things start breaking down.
Is what I’m trying possible?
Here’s my non-working WIP: http://codepen.io/chasebank/pen/yYBYOZ/
Thanks!
