display: inline-block and 100% height to achieve 'floating'

Question

I have a <ul> <li> and I require the use of display: inline-block;. This is required in order to "float" the li's whilst the last element is 100% wide of it's parent container and there could be any amount of li's (floating would mean the amount of li's is finite depending on the width of it's containing element). So the total width of the <ul> will be greater than the width of the viewport.

This is fine except I require the "floated" elements to multiline and I expect all elements which are not multi lined to be 100% height of the <ul>.

I can achieve what I want by setting the height of the <ul> in JS but this is something I really do not want to do.

Here is a JS fiddle. http://jsfiddle.net/d5WBv/3/

Does anyone have a solution. I'm not sure if flexbox or display: table; can solve this but I cannot seem to get it to....

Thanks!

Solution

I guess, you mean that the li's all should have the same height?

If so, you could display them as table-cells:

ul {
    display: table;
    width: 100%;
}

li {
    vertical-align: top;
    display: table-cell;
    padding: 10px;
    margin: 0;
}

Also, check the updated fiddle.