带/不带挠性的盒定位

Question

I saved the code here : http://codepen.io/anon/pen/FxKHB Maybe it's better for you to see it and try something to help me.

My problem is that I have to position the box with 'Dessert' just under the box with 'Entrée' : without the space between.

I use flexbox layout in my container :

.menuContainer
{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
}

Problem : the box 'Dessert' is pushed under because there is too much lines in the box 'Plat'.

Maybe I chose the wrong layout. I chose this one because when the width of the window/device is too small, I need to get everything in one column. I can not just change the relative position of my box because each content is not static. I mean, it can have more lines.

What should I do ? Is it even possible ?

Thank you for your help !

Answer 1

An elegant alternative would be to change your align-items property to stretch for you container and then vertically center the items by making them flexboxes.

I guess it is not quite the desired effect, but without changing the markup this is the best solution I could come up with.

PEN